el-table表格 根据数据结构自定义合并行和列_根据一个数决定el-table的行和列数

在渲染表格时,有时需要根据表格数据,进行一定格式的合并行或列.例如达到下面的效果.

数据结构:

可以看到我们需要根据数据结构的变化,动态的设置表格需要合并的行数. a-table官网文档,提供了span-method方法,返回指定的数据,就可以实现.该方法里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性.

1.遍历后台返回的数据.得到mergeList数据

this.mergeList=[2,3,2]  //每组依次需要合并的行数产生的数组.

2.设置span-method方法

<el-table :data="tableData" :span-method="objectSpanMethod" border>
          <el-table-column prop="id" label="ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名">
          </el-table-column>
            ....
</el-table>

//合并行方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let list = this.mergeList //需要依次处理的行数组
      let s = 0 
      //columnIndex代表那一列需要合并行
      if (columnIndex === 0 || columnIndex === 3) {
        for (var i = 0; i < list.length; i++) {
          s += list[i]  //合计已经合并的行,设置区间
          if (i == 0) {
            if (rowIndex < list[i]) {
              if (rowIndex % list[i] === 0) {
                return {
                  rowspan: list[i], //行数
                  colspan: 1      , //列数
                }
              } else {
                //不需要合并,不做处理
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          } else {
            //只对指定区间的行进行合并
            if (rowIndex >= s - list[i] && rowIndex < s) {
              if ((rowIndex - (s - list[i])) % list[i] === 0) {
                return {
                  rowspan: list[i],
                  colspan: 1
                }
              } else {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    }

总结:使用官方文档,只能对指定倍数的行或列进行合并.做了一些修改,主要是遍历自定义合并行数组,循环进行遍历处理.列的合并也可以使用同样的思路进行处理. 小小总结,不成敬意.各位同学有更好的方法,可以楼下交流一下.