合并单元格，封装成公共js

目录

1. 公共js文件

2. 在其他页面引用

注意：合并方法里面传的tableData 要与表格绑定的数据一致！！

---

1. 公共js文件

const PublicFunction = {
  /**
   * 存放公共的js
   *
   * */
  /**
   * 合并单元格
   * TableData:传递过来的表格数据
   * itemName：属性名
   * rowIndex：行索引值
   * */
  MergeCol: (TableData, itemName, rowIndex) => {
    // 合并单元格
    // id：属性名
    // rowIndex：行索引值
    var idName = TableData[rowIndex][itemName]; // 获取当前单元格的值
    if (rowIndex > 0) {
      // 判断是不是第一行
      // eslint-disable-next-line eqeqeq
      if (TableData[rowIndex][itemName] != TableData[rowIndex - 1][itemName]) {
        // 先判断当前单元格的值是不是和上一行的值相等
        var i = rowIndex;
        var num = 0; // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
        while (i < TableData.length) {
          // 当索引值小于table的数组长度时，循环执行
          if (TableData[i][itemName] === idName) {
            // 判断循环的单元格的值是不是和当前行的值相等
            i++; // 如果相等，则索引值加1
            num++; // 合并的num计数加1
          } else {
            i = TableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环
          }
        }
        return {
          rowspan: num, // 最终将合并的行数返回
          colspan: 1,
        };
      } else {
        return {
          rowspan: 0, // 如果相等，则将rowspan设置为0
          colspan: 1,
        };
      }
    } else {
      // 如果是第一行，则直接返回
      let i = rowIndex;
      let num = 0;
      while (i < TableData.length) {
        // 当索引值小于table的数组长度时，循环执行
        if (TableData[i][itemName] === idName) {
          i++;
          num++;
        } else {
          i = TableData.length;
        }
      }
      return {
        rowspan: num,
        colspan: 1,
      };
    }
  },
};
export { PublicFunction };

2. 在其他页面引用

<el-table
      ref="table"
      :data="tableData"
      :span-method="(param) => objectSpanMethod(param, tableData)"
      :height="getHeight"
      border
      :key="itemKey"
    >

      <el-table-column
        type="index"
        label="序号"
        width="50"
      > </el-table-column>
<el-table>

<script>

import { PublicFunction } from "@/utils/vuePublic";

export default {
  //#region  合并单元格
    // 这个方法是 element-ui提供的单元格合并方法
    // objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
    // row: 当前行
    // column: 当前列
    // rowIndex：当前行号
    // columnIndex ：当前列号
    // 1代表：独占一行
    // 更大的自然数：代表合并了若干行
    // 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
    objectSpanMethod({ row, column, rowIndex, columnIndex }, tableData) {
      if (
        tableData[columnIndex].checkContent != undefined ||
        tableData[columnIndex].checkContent != null
      ) {
        switch (columnIndex) {
          case 1:
            return PublicFunction.MergeCol(tableData, "item", rowIndex);
        }
      } else {
        switch (
          columnIndex // 将列索引作为判断值
        ) {
          // 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并（索引0,1 指的是页面上的0,1）
          case 2:
            return PublicFunction.MergeCol(tableData, "itemDetail", rowIndex);
          case 1:
            return PublicFunction.MergeCol(tableData, "item", rowIndex);
        }
      }
    },
    //#endregion
  
}
</script>
  

注意：合并方法里面传的tableData 要与表格绑定的数据一致！！