使用element-ui中的table表格多行合并

Posted 2023-03-05

参考技术A 这个东西，用的element-ui，难点在于动态地计算每一行的数据，应该合并的行数和列数。

前提条件：要求数据源必须是有序的（或者说，分组的。如按id分类，即id相同的要挨在一起，不能乱排。）

然后，首先对数据源进行一次遍历，计算每个id相同的有几项，然后做个标识。

id相同的项，只需判断这一组中的第一个有几项，比如第一个是6，则下面的5个需要返回【0,0】

Element-ui 表格 (Table) 组件中动态合并单元格

1. 效果图展示

2. 具体实现（以合并行为例）

2.1 实现思路
在 table 组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是 row , rowIndex , column , columIndex; 这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列。
2.2 完整代码

<template>
  <div class>
    <el-table
      :data="listData"
      :span-method="objectSpanMethod"
      border
      class="tableArea"
      style="width: 40%;"
    >
      <el-table-column label="商品类别" prop="productType" align="center" width="200"></el-table-column>
      <el-table-column label="商品数量" prop="amount" align="center"></el-table-column>
      <el-table-column label="商品价格" prop="price" align="center"></el-table-column>
      <el-table-column label="商品名称" prop="productName" width="200px" align="center"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default 
  data() 
    return 
      listData: [],
      testArr1: [],
      testArr2: [],
      testPosition1: 0,
      testPosition2: 0,
    ;
  ,
  methods: 
    // 获取数据
    queryData() 
      this.listData = [
        
          id: "201808300001",
          productType: "纺织品",
          amount: 20,
          productName: "上衣",
          price: "80",
          updateTime: "2018-08-30",
        ,
        
          id: "201808300002",
          productType: "纺织品",
          amount: 20,
          productName: "裤子",
          price: "76",
          updateTime: "2018-08-31",
        ,
        
          id: "201808300003",
          productType: "皮制品",
          amount: 100,
          productName: "挎包",
          price: "150",
          updateTime: "2018-08-31",
        ,

        
          id: "201808300004",
          productType: "皮制品",
          amount: 180,
          productName: "鞋子",
          price: "76",
          updateTime: "2018-08-29",
        ,
        
          id: "201808300005",
          productType: "绸缎",
          amount: 80,
          productName: "旗袍",
          price: "106",
          updateTime: "2018-08-31",
        ,
        
          id: "201808300006",
          productType: "纺织品",
          amount: 20,
          productName: "短裙",
          price: "36",
          updateTime: "2018-08-30",
        ,
        
          id: "201808300007",
          productType: "纺织品",
          amount: 80,
          productName: "短袖",
          price: "36",
          updateTime: "2018-08-30",
        ,
        
          id: "201808300008",
          productType: "纺织品",
          amount: 20,
          productName: "短袖",
          price: "36",
          updateTime: "2018-08-30",
        ,
        
          id: "201808300009",
          productType: "皮制品",
          amount: 20,
          productName: "钱包",
          price: "60",
          updateTime: "2018-08-30",
        ,
        
          id: "201808300011",
          productType: "纺织品",
          amount: 90,
          productName: "手套",
          price: "60",
          updateTime: "2018-08-30",
        ,
        
          id: "201808300012",
          productType: "纺织品",
          amount: 90,
          productName: "袜子",
          price: "36",
          updateTime: "2018-08-30",
        ,
        
          id: "201808300013",
          productType: "饮料",
          amount: 100,
          productName: "雪碧",
          price: "5",
          updateTime: "2018-08-31",
        ,
        
          id: "201808300013",
          productType: "纺织品",
          amount: 100,
          productName: "风衣",
          price: "50",
          updateTime: "2018-08-31",
        ,
      ];

      this.rowspan(this.testArr1, this.testPosition1, "productType");
      this.rowspan(this.testArr2, this.testPosition2, "amount");
    ,
    rowspan(spanArr, position, spanName) 
      this.listData.forEach((item, index) => 
        if (index === 0) 
          spanArr.push(1);
          position = 0;
         else 
          if (
            this.listData[index][spanName] ===
            this.listData[index - 1][spanName]
          ) 
            spanArr[position] += 1;
            spanArr.push(0);
           else 
            spanArr.push(1);
            position = index;
          
        
      );
    ,
    // 表格合并行
    objectSpanMethod( row, column, rowIndex, columnIndex ) 
      if (columnIndex === 0) 
        const _row = this.testArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return 
          rowspan: _row,
          colspan: _col,
        ;
      
      if (columnIndex === 1) 
        const _row = this.testArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return 
          rowspan: _row,
          colspan: _col,
        ;
      
    ,
  ,
  mounted() 
    this.queryData();
  ,
;
</script>

2.3 详细说明

rowspan（）这个函数就是用来返回 spanArr 数组的，定义每一行的 rowspan

if( index === 0)，第一行，直接先给数组 push 进一个1，表示自己先占一行，position 是数组元素的位置
（此时是从数组元素的第一个开始，所以position 为 0）， position为 0 意思表示的就是数组的第一个元素。

当到了 index 为 2 的时候，if(this.listData[index][spanName] === this.listData[index-1][spanName])，
让第二行与第一行作比较：
（1）如果第二行与第一行相等的话，position 就 +1，当有 n 行第一行相同，position 就为 n，表示向下合并 n 行；
第二行自己就 spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了；
（2）如果第二行与第一行不相等的话，那么 spanArr.push(1);就让第二行自己独占一行；

position = index ：把指针拿到 index 这行来，表示设置数组 spanArr[position] 的元素值，然后定义从此行开始向下合并几行
（可以根据示例研究下，当 index 为 2 时，position 为 2，当 index 为 3 时，第四行与第三行需要合并，
那么在数组的 position 元素就要 +1 了，也就是 spanArr[position] += 1）

:span-method="objectSpanMethod" 

这个是官方给定的绑定属性和对应的方法，objectSpanMethod 传入了  row, column, rowIndex, columnIndex 
row: 当前行
column: 当前列
rowIndex：当前行号
columnIndex ：当前列号

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表 colspan。
也可以返回一个键名为 rowspan 和 colspan 的对象。

const _col = _row > 0 ? 1 : 0;  定义的这个单元格列的合并，我们项目只合并行，不合并列；

_row：代表合并行的行数，_row 的值要么是 1，或者更大的自然正整数，要么是 0。
1代表：独占一行
更大的自然数：代表合并了若干行
0：代表“消失”的哪那一个单元格，后面的单元格向前推一格

3. 存在问题

当然也有小bug，当你鼠标移动到上面时hover不准确，当然肯定是有办法滴

cell-mouse-enter  cell-mouse-leave   cell-class-name

这三个官方提供的方法可以有效修改，但我还是没搞太懂，就不献丑了，大家可以先行研究。

参考文章（侵删）