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
          };
        }
      }
    }

如此即可!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值