【element-ui】table span-method 合并队列生成函数 用于实现表格单元格合并

span-method 表格单元格合并

使用通用方法实现表格单元格合并

实现步骤：
① 合并单元格的表格暂不支持排序，后端接口需要根据一定合并规律的顺序返回数据
前端这边根据对应的合并规律声明对应function

// 生成span_method_list合并队列的合并规则
  spanMethodsCustomFun(row, previous_row) {
    // 如果当前表格数据行 row  和 上一行 previous_row 的 GRANTEE - 用户名 字段相等 则需要合并  返回true
    return (row.GRANTEE === previous_row.GRANTEE)
  }

② 在获取表格数据的接口请求方法中，调用通用工具方法 spanMethodByCustomFun 生成合并队列 span_method_list

import { spanMethodByCustomFun } from '@/utils/tableUtils'

span_method_list: []

// 获取用户权限-用户
  getprivilegesUserOverview(parames) {
    ...
    getprivilegesUserOverview(parames)
      .then(response => {
        if (response.data.status === 0) {
          ...
          this.tableList = response.data.data
          // 通过合并队列函数生成合并队列
          this.span_method_list = this.spanMethodByCustomFun(this.tableList, this.spanMethodsCustomFun)
        } else {
          ...
        }
      })
  }

③ el-table 属性 span-method 绑定自定义方法 (根据实际需求 合并列还是合并行来编写)

<el-table
  ...
  :data="tableList"
  :span-method="objectSpanMethod"
  ...
>


 // el-table - span-method - 绑定方法 具体参数查看element官方
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 根据生成的合并队列 以及想要合并的具体哪些列或者哪些行  组合成官方对应规范的合并对象
    // columnIndex === 0 判断是否为第一列
    // column.label === '操作' 判断是否有操作列
    if (columnIndex === 0 || column.label === '操作') {
      // 如果是第一列或者操作列，则根据span_method_list对应rowIndex的值生成{ rowspan: rowspan, colspan: colspan }
      const rowspan = this.span_method_list[rowIndex]
      const colspan = rowspan > 0 ? 1 : 0
      return { rowspan: rowspan, colspan: colspan }
    }
  }

[资料]
element 对应文档