Element table 常用合并单元格＜封装＞

el-table 表格内容合并

<el-table
    v-loading="isTableLoading"
    :data="tableData"
    border
    :span-method="
      (method) => arraySpanMethod(method, tableData, 'templetTypeId', [1, 3, 4])
    "
>...</el-table>

传入指定参数,，完成单元格简单合并，将常用合并表格方便封装，以便日后使用

methods: {
    /**
     * @description 合并列表数据
     * @param {Object} { rowIndex, columnIndex } 当前行 index 当前列 xinde 
     * @param {Array<any>} list 表格数据
     * @param {String} key 用来合并的相同字段
     * @param {Array<number>} columnIndexs 想要合并的列
     */
    arraySpanMethod({ rowIndex, columnIndex }, list, key, columnIndexs = []) {
      if (!Array.isArray(columnIndexs)) {
        throw new TypeError(columnIndexs + '不是数组');
      }
      const spanArr = this.getSpan(list, key);
      if (columnIndexs.includes(columnIndex)) {
        return {
          rowspan: spanArr[rowIndex],
          colspan: spanArr[rowIndex] > 0 ? 1 : 0,
        };
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },
    /**
     * @description 根据合并字段分类
     * @param {Array<any>} list 表格数据
     * @param {String} key 需要用来合并的字段
     */
    getSpan(list, key) {
      const spanArr = [];
      let count = 0;
      list.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
        } else {
          if (item[key] === list[index - 1][key]) {
            spanArr[count] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            count = index;
          }
        }
      });
      return spanArr;
    },
}

表格数据如下

合并效果如下