【a-table】a-table表格合并(vue2.0)
a-table表格合并。
·
a-table表格合并
插槽
//插槽
<template slot="status" slot-scope="key, record, index, column"> </template>
//表头中
{
key:"projectStatus",
dataIndex:"projectStatus",
title: "状态",
width: 70,
align: "center",
scopedSlots: { customRender: "status" },
},
合并表头
//要合并的列
{
key: "performanOne",
dataIndex: "performOne",
title: "指标",
width: 60,
fixed: true,
align: "left",
colSpan: 2,//合并两列,下一列设置为0
}
合并表格
{
key: "performanOne",
dataIndex: "performanOne",
title: "指标",
width: 60,
fixed: true,
align: "left",
colSpan: 2,
customRender: (value, key, index) => {
const obj = {
children: value,
attrs: {
colSpan: this.colSpanC[index],//合并列数组,1不合并
rowSpan: this.spanArrC[index],//合并行数组
},
};
return obj;
},
},
// arr.reduce计算合并数组
getSpanC(arr) {
let pos2 = 0;
this.spanArrC = [];
this.colSpanC = [];
let pos1 = 0;
let arr1=arr//表格数组
arr.reduce((old, cur, i) => {
// old 上一个元素 cur 当前元素 i 索引
if (i === 0) {
// 第一次判断先增加一个 1 占位 ,索引为0
arr[i].index=1
this.spanArrC.push(1);
pos2 = 0;
if (cur.performanOne && cur.performanTwo == null) {//列相同
this.colSpanC.push(2);
} else {
this.colSpanC.push(1);
}
} else {
if (cur.performanOne == old.performanOne) {//相同项
this.spanArrC[pos2] += 1;
arr[i].index=arr[i-1].index
this.spanArrC.push(0);
} else {
arr[i].index=arr[i-1].index+1
this.spanArrC.push(1);
pos2 = i;
}
if (cur.performanOne && cur.performanTwo == null) {
this.colSpanC.push(2);
} else {
this.colSpanC.push(1);
}
}
return cur;
}, {});
this.tableDataC=arr
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)