element ui table 动态合并行和列

434 阅读1分钟

需求

1.根据数组对象中的某一个参数值相同来合并行 2.根据数组对象中某一俩值来进行排序

效果

image.png

主要思路

1.通过sort进行多字段排序来将需要合并的字段进行排序 2.通过对table数据处理,添加合并标识 3.通过table的span-method方法来实行table的合并

相关代码

html

  <el-table
    :data="tableData.detailsList"
    :span-method="objectSpanMethod"
    style="width: 100%;margin: 20px 0"
    border>
<el-table-column
   width="100"
   prop="target"
   label="检验分类">
</el-table-column>
<el-table-column
   prop="templetName"
   width="130"
   label="要求项目">
</el-table-column>
</el-table>

js

// table数据处理
let arrTarget=[]
let pos
res.data.detailsList.forEach(item=> {
    item.rowspan = 1
})
for(let i = 0; i < res.data.detailsList.length; i++) {
if (i === 0) {
  vm.spanArr.push(1);
  pos = 0
} else { 
  if (res.data.detailsList[i].target === res.data.detailsList[i - 1].target) {
    vm.spanArr[pos] += 1;
    vm.spanArr.push(0);
  } else {
    vm.spanArr.push(1);
    pos = i;
  }
}
}
res.data.detailsList.forEach(item=> {
if (arrTarget.length !== 0) {
  if (arrTarget.indexOf(item.target) === -1) {
    arrTarget.push(item.target)
  }
}else {
  arrTarget.push(item.target)
}
})
vm.tableData = res.data;
// table合并函数--el-table绑定的span-method的函数
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0 || columnIndex > 6) {
    let _row = this.spanArr[rowIndex]; 
    console.log(_row,_row);
    let _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    }
  }
},