https://jsfiddle.net/ksvyda1c/ 运行结果
<el-table :data="tableData" border style="width: 1102px" show-summary :summary-method="getSummaries">
<el-table-column prop="id" label="" width="100" align="center"></el-table-column>
<el-table-column prop="name" label="书籍名称" width="200" align="center"></el-table-column>
<el-table-column prop="date" label="出版日期" width="200" align="center"></el-table-column>
<el-table-column prop="price" label="价格" width="200" align="center">
<template slot-scope="scope">
{{ '¥' }} {{ (scope.row.price * scope.row.count) | showPrice }}
</template>
</el-table-column>
<el-table-column prop="count" label="购买数量" width="200" align="center">
<template slot-scope="scope">
<el-input-number v-model="scope.row.count" :min="1" :max="10"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="remove" label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-delete" @click.native.prevent="remove(scope.$index, tableData)"></el-button>
</template>
</el-table-column>
</el-table>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
index:0,
tableData:[
{
id:1,
name:"《算法导论》",
date:"2006-9",
price:"100",
count:1
},
{
id:2,
name:"《UNIX编程艺术》",
date:"2006-2",
price:"500",
count:1
},
{
id:3,
name:"《123456》",
date:"2020-9",
price:"1000",
count:1
},
{
id:4,
name:"77777",
date:"2006-9",
price:"150",
count:1
}
]
},
methods:{
remove(index,rows){
rows.splice(index,1);
},
// getsummaries
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
const values = data.map(item => Number(item[column.property]));
if (column.property === 'price') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
}else{
sums[index] = '--'
}
if (column.property === 'count') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' ';
}
});
return sums;
}
},
computed:{
},
filters:{
showPrice(value){
value = Number(value);
return value.toFixed(2)
}
}
})
</script>
请问这里的summary-method要怎么写才能让总计的价格随着购买数量和单价变化而变化?
###scope.row.price * scope.row.count | showPrice