elementui的table合并单元格_elementui表格合并单元格

提示：公共js合并单元格

---

前言

当我们项目中多个页面都需要用到合并相同字段。一个页面一个页面的写太过于繁琐，所以封装了公共js：合并单元格

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、合并单元格

elementui的官网上有span-method 合并行或列的计算方法的属性。

自带四个属性值：({ row, column, rowIndex, columnIndex })，

row: 当前行，column: 当前列， rowIndex：当前行号，columnIndex ：当前列号

二、使用步骤

1.在公共的js中存放

代码如下（示例）：

<script>
 
  /**
   * 合并单元格
   * 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,
      };
    }
  },
</script>

2.在页面中使用

代码如下（示例）：

  代码如下：

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

---

总结：

以上就是今天要讲的内容，本文仅仅简单介绍了公共js封装以及使用合并单元格