关于前端:antv-table组件-如何合并单元格的同时使用scopedSlots

47次阅读

共计 958 个字符，预计需要花费 3 分钟才能阅读完成。

应用 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>

最终成果如下：

正文完