element合并表格？

刚听到这个需求，感觉简直不要太简单。虽然没有搞过这样的需求，但是element的table自带合并不是么。然后自以为是的我被现实狠狠的打了一巴掌

一、官方API

【element table】
如果官方文档能够解决我的问题，就不会有以下问题了。不过还是建议有必要尝试一下官方Demo

二、接收需求

当指定的两列，值与相邻行相同时需要对指定列进行合并操作

先来一些模拟数据：

  data() {
    return {
      tableData: [
        { id: "0", name: "张三", sex: "女" },
        { id: "1", name: "李四", sex: "男" },
        { id: "2", name: "李四", sex: "男" },
        { id: "3", name: "李四", sex: "未知" },
        { id: "4", name: "王五", sex: "未知" },
        { id: "5", name: "张三", sex: "女" },
        { id: "6", name: "张三", sex: "女" },
        { id: "7", name: "张三", sex: "未知" },
        { id: "8", name: "王五", sex: "女" },
        { id: "9", name: "王五", sex: "女" },
        { id: "10", name: "李四", sex: "女" },
        { id: "11", name: "李四", sex: "女" }
      ]
    };
  }

需求转换真实效果，如图所示：

看似很简单，其实真的不难。
只要把官方Demo吃个差不多，举一反三即可。

三、大展手脚

经过好一番折腾，终于得以实现⬇️

解决问题，首先要明确思路。

1. 整合数据，需要明确知道哪些数据是要进行合并的，哪些是被合并的，哪些是不需要合并的
2. 修改合并的逻辑

3.1 组件展示

      <el-table
        :data="tableData"
        :border="true"
        style="width: 300px;"
      >
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
      </el-table>

默认展示为：

3.2 整合数据

添加 rowspan标记合并行的位置信息

调整依据： 姓名 && 性别 分别相同的相邻行需要进行合并

// 调整数据
adjusData(){
	let dataSource = [...this.tableData];
	// 注意：此操作为倒序操作
    for (let i = dataSource.length - 1; i > 0; i--) {
      if (!dataSource[i].rowspan) dataSource[i].rowspan = 1; // 默认都是1
      if (
        dataSource[i].name == dataSource[i - 1].name &&
        dataSource[i].sex == dataSource[i - 1].sex
      ) {
        // 主要处理数据的逻辑在这里
        /**
         * 如果满足条件，则上一个数据的rowspan需要进行累加，即为需要进行合并的行数
         * 当前行的rowspan需要重置为0; 0即为需要被合并的单元格
         */
        dataSource[i - 1].rowspan = dataSource[i].rowspan + 1;
        dataSource[i].rowspan = 0;
      }
    }
    // 有可能第一个数据的rowspan为undefined 所以再次处理数据，避免出错
    dataSource = dataSource.map((item, index) => {
      if (index == 0 && !item.rowspan) {
        return {
          ...item,
          rowspan: 1
        };
      }
      return item;
    });
    this.tableData = dataSource;
}

3.3 修改组件

添加一个属性:span-method="objectSpanMethod"

3.4 合并展示数据

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 当列索引是1(第二列), 需要设置要合并的列/行
      if (columnIndex === 1) {
        if (row.rowspan > 1) {
          // 当rowspan值不为1，即代表需要进行向下合并 合并行数为当前rowspan
          return {
            rowspan: row.rowspan, // 向下合并rowspan行
            colspan: 1 // 合并1列，即只在当前列操作合并行
          };
        } else if (row.rowspan == 1) {
          // rowspan为1 不作合并操作
          return {
            // 1表示不合并
            rowspan: 1,
            colspan: 1
          };
        } else {
          // 其他行 
          return {
            // 0表示已被合并, 直接不显示
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 当列索引是2(第三列), 需要设置要合并的列/行
      if (columnIndex === 2) {
        if (row.rowspan != 1) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          };
        } else if (row.rowspan == 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }

如此即可！！！