ant design vue table 合并并添加点击事件

效果图 (合并 + 点击事件)

<a-table :columns="columns" :rowKey="(record,index)=>{return index}" :pagination="false" :data-source="mapTableList()" bordered></a-table>

//columns数据
let columns = [{
            title: '#',
            dataIndex: 'weekName',
            customRender: (value, row, index) => {
                var child = this.createElementHtml(value, row)
                const obj = {
                    children: child,
                    attrs: {},
                };
                if (row.rowSpan) obj.attrs.rowSpan = row.rowSpan;
                else obj.attrs.rowSpan = 0;

                return obj;
            },
        },
        {
            title: '时段',
            dataIndex: 'timeInterval',
            // ellipsis: true,
            // with:'12%'
        },
        {
            title: '工作内容',
            dataIndex: 'jobContent',
        },
        {
            title: '参与人员',
            dataIndex: 'participants',
        },
        {
            title: '地点',
            dataIndex: 'place',
        },
        ]

//table 数据
tableList: [
                [{
                    weekName: '周一',
                    timeInterval: '09:30--11:00',
                    jobContent: '主任办公会',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周二',
                    timeInterval: '09:30--11:00',
                    jobContent: '接待马士基集团',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                },
                {
                    weekName: '周二',
                    timeInterval: '13:00--17:00',
                    jobContent: '项目评审',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                },
                {
                    weekName: '周二',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                },
                {
                    weekName: '周二',
                    timeInterval: '15:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周三',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会3',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                },
                {
                    weekName: '周三',
                    timeInterval: '15:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会3',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周四',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会4',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周五',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会5',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周六',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会6',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周日',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会7',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }]
            ],

//methods 方法
methods: {
        mapTableList() {
            // 二维数组添加 rowspan  并扁平化处理
            let arr = this.tableList.map((item, index) => {
                item.map(val => item[0].rowSpan = item.length)
                return item
            }).flat(Infinity)
            return arr
        },
        clickHandler(val, row) {
            alert(val, row)
            console.log(val, row, 'val,row')
        },
        createElementHtml(value, record) {
            const h = this.$createElement;//重要
            let this_ = this
            return h('p', null, [
                h('span', null, value),
                h('a-icon', {
                    //a-icon
                    attrs: {
                        type: "plus-circle"
                    },
                    class: "anticon anticon-plus-circle addIcon_",
                    on: {
                        click: function () {
                            this_.clickHandler(value, record);
                        }
                    },
                    //相当于`v-bind:style`
                    style: {
                        fontSize: '18px',
                        marginTop: '2px'
                    },
                },
                )
            ])
        }
    },

 参考链接：https://blog.csdn.net/kuangniaokuang/article/details/104673167

标签：timeInterval,00,vue,weekName,jobContent,ant,participants,design,place
来源： https://www.cnblogs.com/xuxuguaiguai/p/15910987.html