1、需求:在总扣分项计算厂家扣分的总和,即当前行的所有val值相加(数据结构图、代码图、效果图)
2、无法在slot中计算渲染,所以只能依靠customRender先计算后渲染(customRender官网描述)
let total = 0; // 定义总数
const columns = [
{
title: '测站类型',
dataIndex: 'name',
key: 'name',
width: 150
},
{
title: '总扣分',
dataIndex: "pointTatol",
customRender: function (text, record, index) {
if(record.keyValues.length == 0) {
// 无数据时
return 0
} else {
total = 0; // 循环前清零,不然会添加前面全部行的数据
for (let i = 0; i < record.keyValues.length; i++) {
// 每一项数据相加
total += Number(record.keyValues[i].val)
}
// 返回值
return total;
}
// return total;
},
key: 'pointTatol',
width: 100
},
{
title: '厂家扣分',
scopedSlots: { customRender: 'keyValues' },
key: 'keyValues',
ellipsis: true
}
];
data() {
return {
columns,
}
},
也不必使用slot了,自动会渲染上去。
3、注意点:尽量先一步一步去打印看数据,还有就是清零那一步,最终效果:
东京奥运会,中国加油,河南加油!