<el-table :data="tableData" size="small" border :summary-method="getSummaries" show-summary style="width: 100%;">
<el-table-column type="index" prop="id" label="序号" width="60">
<template slot-scope="scope">
<div class="customIpt2">
{{scope.$index + 1}}
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="名称">
</el-table-column>
<el-table-column label="amount1" prop="amount1">
<template slot-scope="scope">
<div class="customIpt2">
<el-input size="mini" v-model="scope.row.amount1"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="amount2" prop="amount2">
<template slot-scope="scope">
<div class="customIpt2">
<el-input size="mini" v-model="scope.row.amount2"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="amount3" prop="amount3">
<template slot-scope="scope">
<div class="customIpt2">
<el-input size="mini" v-model="scope.row.amount3"></el-input>
</div>
</template>
</el-table-column>
</el-table>
data() {
return {
tableData: [{
id: '0000',
name: '汇总',
amount1: '0',
amount2: '0',
amount3: 0
}, {
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}],
lastTableinfo: {
id: '000000',
name: '汇总',
amount1: '0',
amount2: '0',
amount3: 0
}
}
},
methods: {
getSummaries(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
const values = data.map((item, index) => {
if (index != 0) {
return Number(item[column.property])
}
});
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
sums[index] = 'N/A';
}
});
this.tableData[0].amount1= sums[2]
this.tableData[0].amount2= sums[3]
this.tableData[0].amount3= sums[4]
return false;
}
}
/deep/.el-table__footer-wrapper{
height: 0;
}
网友评论