应用 antv table 组件时,实现合并单元格的同时应用 scopedSlots
<template>
<a-table bordered ref="table" :columns="colunms" :data-source="data" rowKey="id">
<template slot="colspan" slot-scope="{record}">
<span> 我是合并单元格之后的 slot, 税前工资:{{record.amount}} , 税后工资 {{record.amount1}}</span>
</template>
</a-table>
</template>
<script>
export default {data() {
return {data: [],
colunms: []};
},
methods: {getColumns() {
return [{
title: '姓名',
dataIndex: 'name'
}, {
title: '工资',
children: [{
title: '税前工资',
dataIndex: 'amount1',
customRender: (text, row, index) => {
const that = this.$refs.table;
return {
attrs: {
colSpan: 2,
style: 'background:red;color:white'
},
children: [that.$scopedSlots['colspan']({// slot-scope 中接管的参数
record: row,
text,
index
})
]
};
}
},
{
title: '税后工资',
customRender: (text, row, index) => {
return {
attrs: {colSpan: 0}
};
}
}]
}];
}
},
mounted() {this.$nextTick(() => {this.colunms = this.getColumns();
});
},
created() {let data = [];
for (var i = 0; i < 5; i++) {
data.push({name: `name${i}`,
amount: Math.random() * 1000,
amount1: Math.random() * 1000});
}
this.data = data;
}
};
</script>
最终成果如下: