[ElemeFE/element]Table: 添加基于配置的合并行属性 merge-rows

6

span-method虽然使用起来很灵活，但对于动态表格来说使用起来相对麻烦。表格合并大多数情况下都是行合并，合并规则也相对简单：上下行数据相同时就可以合并。给表格添加merge-rows属性，只有相邻的行数据条件相等，自动合并，使用简单，不用写繁琐的方法，相信在大多数场景下能大大简化表格合并功能的难度。

tanghuibo

5

可以实现成这样子么？让开发者自己定义合并条件

<template>
  <div>
    <el-table :data="tableData" :merge-rows="mergeRows" border style="width: 100%">
      <el-table-column prop="company" label="公司"></el-table-column>
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="employees" label="人员"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods:{
      mergeRows({currentRow,nextRow}){
          return currentRow.wages > nextRow.wages && currentRow.wages>=5000
      }
  },
  data() {
    return {
      tableData: [
        {
          company: "公司1",
          department: "财务部",
          employees: "小明"，
          wages:2000,
        },
        {
          company: "公司1",
          department: "财务部",
          employees: "小李"，
          wages:3000,
        },
        {
          company: "公司1",
          department: "IT部",
          employees: "小张"，
          wages:4000,
        },
        {
          company: "公司1",
          department: "IT部",
          employees: "小赵"，
          wages:5000,
        },
        {
          company: "公司2",
          department: "IT部",
          employees: "小王"，
          wages:6000,
        },
        {
          company: "公司2",
          department: "IT部",
          employees: "小徐"，
          wages:7000,
        },
        {
          company: "公司2",
          department: "人事部",
          employees: "小唐"，
          wages:8000,
        },
        {
          company: "公司2",
          department: "人事部",
          employees: "小郑"，
          wages:9000,
        }
      ]
    };
  }
};
</script>

cgxqd

0

数据长什么样就怎么进行合并，用数据控制单元格是否合并，不更直观一些吗

tanghuibo

8

你那个限定的只有相等条件（相邻的行数据条件相等），如果是别的条件的话，就行不通了，建议可以搞成 Array，Function(currentRow,nextRow){}，这样子可以和下个的row数据对比

cgxqd

0

哪些场景下数据不相同是需要合并的呢？

tanghuibo

1

就比如我上面发的代码

cgxqd

7

上面的例子是让第4行的”公司1“和第5~8行的”公司2“进行合并吗？

tanghuibo

[ElemeFE/element]Table: 添加基于配置的合并行属性 merge-rows

回答