应用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>
最终成果如下: