<a-table
:columns="noPmColumns"
:dataSource="sourceLeftData"
:loading="tableLoading"
:scroll="{ }"
rowKey="rowKeyInfo"
:showHeader="false"
:pagination="false"
size="middle"
bordered
>
</a-table>
noPmColumns:[
{
title:"mpdGroup",
dataIndex:"mpdGroup",
width: 127,
align: "center",
customRender:(value, row, index)=>{
const obj = {
children: value,
attrs: {},
};
obj.attrs.rowSpan = row.mergeRowSpan;
return obj
}
},
{
title:"eqpId",
dataIndex:"eqpId",
width: 127,
align: "center",
},
{
title:"chamberList",
dataIndex:"chamberList",
scopedSlots: { customRender: "action" },
align: "center",
customCell:function(record,index){
return {
style:{
padding:'1px !important'
}
}
}
},
],
sourceLeftData:[],
合并第一列的方法:
在请求到接口的list数据后,调用rowSpan方法
//getData代表请求过来的list
//dataIndex代表每一行的第一列的key名称
rowSpan(getData,dataIndex) {
//过滤合并后现实的表格内容
let arr = getData
.reduce((result, item) => {
//不存在则放入展示结果
if (result.indexOf(item[dataIndex]) < 0) {
result.push(item[dataIndex]);
}
return result;
}, [])
//确定每个合并的合并行数
.reduce((result, keys) => {
//计算出可以合并的数据
const children = getData.filter((item) => item[dataIndex] === keys);
result = result.concat(
//计算出合并行数
children.map((item, index) => ({
...item,
[`mergeRowSpan`]: index === 0 ? children.length : 0,
}))
);
return result;
}, []);
console.log("arr",arr);
//将最后展示的数据替换原数据
this.sourceLeftData = arr;
},