表格数据有层级嵌套,for循环遍历渲染的,导致直接调用表格行合并方法会有问题。
以下是代码
<div style="height:100%;width:100%;" v-for="item in UpdateContentList" :key="item.tableHeader" v-loading="updateContnetLoading">
<div class="dialogTableHeader">{{item.tableHeader}}</div>
<el-table border :data="item.dataList" :span-method="objectSpanMethod">
<el-table-column label="Test Item" align="left" prop="testItem" width="220"/>
<el-table-column label="可接受标准" align="left" prop="acceptanceCriteria" width="140"/>
<el-table-column label="Time Point" align="left" prop="timePoint" width="120"/>
<el-table-column label="Previous Information" align="left" prop="previousInformation" />
<el-table-column label="Present Information" align="left" prop="presentInformation" />
</el-table>
</div>
表格合并方法
const objectSpanMethod = ({row,column,rowIndex,columnIndex}) => {
// console.log(row,column)
// nextTick((_)=>{
if (columnIndex === 0){
if(row.spanArr){
const _row = row.spanArr;
const _col = _row > 0?1:0;
return {
rowspan:_row,
colspan:_col
}
}
return {
rowspan:0,
colspan:0
}
}
if (columnIndex === 1){
if(row.spanArr1){
const _row = row.spanArr1;
const _col = _row > 0?1:0;
return {
rowspan:_row,
colspan:_col
}
}
return {
rowspan:0,
colspan:0
}
}
// })
}
下面是具体处理逻辑
let arr = res.data;
arr.forEach(item=>{
let data = JSON.parse(JSON.stringify(item.dataList));
// console.log(data,'000')
item['spanArr'] = [];
item['spanArr1'] = [];
for (let i = 0; i < data.length; i++) {
if (i === 0) {
// 如果是第一条记录(即索引是0的时候),向数组中加入1
item['spanArr'].push(1);
item['spanArr1'].push(1);
pos.value = 0;
pos1.value = 0;
} else {
if (data[i].testItem === data[i - 1].testItem) {
item['spanArr'][pos.value] += 1;
item['spanArr'].push(0);
if (data[i].acceptanceCriteria === data[i - 1].acceptanceCriteria) {
item['spanArr1'][pos1.value] += 1;
item['spanArr1'].push(0);
} else {
item['spanArr1'].push(1);
pos1.value = i;
// 不相等push 1
}
} else {
item['spanArr'].push(1);
pos.value = i;
item['spanArr1'].push(1);
pos1.value = i;
// 不相等push 1
}
}
}
})
let arr1 = arr;
arr1.forEach((item1,index)=>{
item1.dataList.forEach((val,idx)=>{
val['spanArr'] = item1.spanArr[idx];
val['spanArr1'] = item1.spanArr1[idx];
})
})
// console.log(arr1,'999')
UpdateContentList.value = arr1;