效果图 (合并 + 点击事件)
<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