表格合并

要求：熟悉element-ui中table的普通合并方式

element-ui 官方网站的table普通合并方式，是在每一行数据渲染的时候执行我们设置的合并的行数和列数，以得到不同的效果。但这并不满足我们日常开发需求。

以下是官方的普通合并方式：

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {    //用于设置要合并的列
          if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
            return {
              rowspan: 2,　　　　　//合并的行数
              colspan: 1          //合并的列数，设为０则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

为了实现我们日常开发需求，我们需要生成一个与行数相同的数组用来记录每一行设置的合并数。

// 将从后台获取到的数据，传入合并的方法中（注意：直接传入需要的是数组类型）
this.getSpanArr(<List>);

注：后台获取数据的时候根据要在前台进行合并的字段进行排序，使要合并的字段值相同的记录依次相邻。

// 记录每一行设置的合并数
// data就是我们从后台拿到的数据，通常是一个数组；spanArr是一个空的数组，用于存放每一行记录的合并数；pos是spanArr的索引。
    getSpanArr(data) {
      this.spanArr = [];
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else if (data[i].name === data[i - 1].name) {
          this.spanArr[this.pos] += 1;
          this.spanArr.push(0);
        } else {
          this.spanArr.push(1);
          this.pos = i;
        }
      }
    }

上述代码意思是：如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，０即表示该行不显示。

    // 合并渲染
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }

最后将合并的渲染方法绑定给table

<el-table
  :data="List"
  border
  :span-method="arraySpanMethod">
  ......
</el-table>

版权声明：本文为CSDN博主「KnifeBlade」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_29468573/article/details/80742646