el-table使用合并行和列功能

Ronin-code

已于 2023-02-01 18:49:12 修改

阅读量6.1k

点赞数

文章标签：前端 elementui

于 2023-02-01 18:13:00 首次发布

原文链接：https://blog.csdn.net/weixin_40594645/article/details/126927346

版权

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。

实现效果如图：

html：

<el-table
        border
        :data="data_arr"
        :span-method="objectSpanMethod"
      >
......
</el-table>

js：


// 遍历数据根据条件判断是否需要合并列
    setData() {
      // rowNumArr的为一项为需要合并的单元格数和数据data_arr一一对应
      this.rowNumArr = []
      this.data_arr.forEach((item, ind, arr) => {
        if(ind) {
          // 和上一个对比字段是否需要合并
          if (item.seq === arr[ind -1].seq) {
            // rowNumArr当前的当前项加一后，要添加一个特殊数据项，用于后续判断显示占横向单元格的数量，可以是0也可以是其他
            this.rowNumArr[this.inde] += 1
            this.rowNumArr.push(0)
          } else {
            // 不符合合并条件则添加1个单元格进去，并且记录当前下标
            this.rowNumArr.push(1)
            this.inde = ind
          }
        } else {
          // 第一条数据一定有1个单元格
          this.rowNumArr.push(1)
          this.inde = 0
        }
      })
      // return rowNumArr
    },
    /**
     * 当前行 row
     * 当前列 column
     * 当前行号 rowIndex
     * 当前列号 columnIndex
     */
    // 合并行或列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 对当前了纵列号为0和1的单元格进行合并操作
      if (columnIndex === 0 || columnIndex === 1) {
        // 获取当前行的需要合并的单元格数
        const rowNum = this.rowNumArr[rowIndex]
          if (rowNum) {
            // 一个单元格纵向横向合并的单元格数量
            return {
              rowspan: rowNum, // 纵向合并单元格的数量
              colspan: rowNum > 0 ? 1 : 0 // 横向合并单元格的数量，纵向单元格数是0的话说明他是被合并的，横向单元格数也就为0不显示了，这里不考虑横向合并所以写死的是1
            };
          } else {
            // 被合并项设置为0，即不显示单元格
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
    },