关于element-ui中Table表格如何合并单元格

迷南。 2022-03-29 03:18 2161阅读 1赞

# element-ui中Table表格如何合并单元格 #

**相信大家在使用element-ui中table组件的时候在boss要求合并单元格时都犯过怵（仅指我这个小白），而element-ui中合并的时候也没有给全解释（也是我的问题），但工作在前，终于通过不懈努力，终于将它搞成功；文章最后贴上源码**

##### 第一步 给出的样式 #####

![我们需要的表格样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODUxNjY4OA_size_16_color_FFFFFF_t_70]

#### 第二步：代码开撸 ####

##### 首先在data中新建变量 #####

data() { 
         return { 
           skuListInfo: [ // 假数据
             { 
               id: 1,
               name: '普通门店',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '1',
               productInfo: '日托',
               mergeId: 1,
               feeType: '1',
               feeTypeInfo: '学费',
               billing: '月/季/年制度',
             },
             { 
               id: 2,
               name: '普通门店',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '2',
               productInfo: '晚托',
               feeType: '1',
               mergeId: 1,
               feeTypeInfo: '学费',
               billing: '月/季/年制度',
             },
             { 
               id: 3,
               name: '普通门店',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '3',
               productInfo: '临时托',
               feeType: '1',
               mergeId: 1,
               feeTypeInfo: '学费',
               billing: '月/季/年制度',
             },
             { 
               id: 4,
               name: '普通门店',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '4',
               productInfo: '越拖',
               feeType: '1',
               mergeId: 1,
               feeTypeInfo: '学费',
               billing: '月/季/年制度',
             },
             { 
               id: 9,
               name: '普通门店',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '4',
               productInfo: '全部',
               feeType: '2',
               mergeId: 1,
               feeTypeInfo: '定金',
               billing: '月/季/年制度',
             },
             { 
               id: 10,
               name: '普通门店',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '4',
               productInfo: '全部',
               feeType: '3',
               mergeId: 1,
               feeTypeInfo: '学杂费',
               billing: '月/季/年制度',
             },
             { 
               id: 5,
               name: '团购',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '5',
               productInfo: '寒假托',
               feeType: '2',
               mergeId: 1,
               feeTypeInfo: '定金',
               billing: '月/季/年制度',
             },
             { 
               id: 6,
               name: '团购',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '5',
               productInfo: '日托',
               feeType: '1',
               mergeId: 1,
               feeTypeInfo: '学费',
               billing: '月/季/年制度',
             },
             { 
               id: 7,
               name: '团购',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '5',
               productInfo: '晚托',
               feeType: '1',
               mergeId: 1,
               feeTypeInfo: '学费',
               billing: '月/季/年制度',
             },
             { 
               id: 8,
               name: '大客户',
               storeIds: [1, 2, 3, 4],
               storeIdInfo: '[1, 2, 3, 4]',
               productType: '6',
               productInfo: '暑假托',
               feeType: '3',
               mergeId: 1,
               feeTypeInfo: '学杂费',
               billing: '月/季/年制度',
             },
           ],
           typeNameArr: [],  // 第一列进行合并操作时存放的数组变量
           typeNamePos: 0, // 上面的数组的下标值
           storeArr: [],  // 第二列进行合并操作时存放的数组变量
           storePos: 0,// 上面的数组的下标值
           feeArr: [], // 第三列进行合并操作时存放的数组变量
           feePos: 0,// 上面的数组的下标值
         };
       },

##### 接着初始化上述定义的变量 #####

merageInit() {  // 在下文的时候会用到，对数据进行初始化是很有必要的
            this.typeNameArr = [];
            this.typeNamePos = 0;
            this.storeArr = [];
            this.storePos = 0;
            this.feeArr = [];
            this.feePos = 0;
          },

#### 对数据进行处理，通过merage处理之后才可以重新合并 ####

merage() { 
            this.merageInit(); // 前文的初始化数据函数
            for (let i = 0; i < this.skuListInfo.length; i += 1) { 
              if (i === 0) { 
                // 第一行必须存在
                this.typeNameArr.push(1);
                this.typeNamePos = 0;
                this.storeArr.push(1);
                this.storePos = 0;
                this.feeArr.push(1);
                this.feePos = 0;
              } else { 
                // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
                // 第一列 下面的是eslint的不限制语法
                // eslint-disable-next-line no-lonely-if 
                if (this.skuListInfo[i].name === this.skuListInfo[i - 1].name) { 
                  this.typeNameArr[this.typeNamePos] += 1;
                  this.typeNameArr.push(0);
                } else { 
                  this.typeNameArr.push(1);
                  this.typeNamePos = i;
                }
                // 第二列
                if (this.skuListInfo[i].storeIdInfo === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
                  this.skuListInfo[i - 1].name) { 
                  this.storeArr[this.storePos] += 1;
                  this.storeArr.push(0);
                } else { 
                  this.storeArr.push(1);
                  this.storePos = i;
                }
                // 第三列
                if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIdInfo
                  === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
                  this.skuListInfo[i - 1].name) { 
                  this.feeArr[this.feePos] += 1;
                  this.feeArr.push(0);
                } else { 
                  this.feeArr.push(1);
                  this.feePos = i;
                }
              }
            }
          },

#### 上述工作完成之后就到了最重要的一步-----使用element的自带函数 ####

objectSpanMethod({  row, column, rowIndex, columnIndex }) { 
          // if (columnIndex === 0) { // 用于设置要合并的列
          // if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
          // return { 
          // rowspan: 2, // 合并的行数
          // colspan: 1, // 合并的猎术, 设置为0则直接不显示
          // };
          // }
          // return { 
          // rowspan: 0,
          // colspan: 0,
          // };
          // }
            if (columnIndex === 0) { 
              // 第一列的合并方法
              const row1 = this.typeNameArr[rowIndex];
              const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row1,
                colspan: col1,
              };
            } else if (columnIndex === 1) { 
              // 第二列的合并方法
              const row2 = this.storeArr[rowIndex];
              const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row2,
                colspan: col2,
              };
            } else if (columnIndex === 2) { 
              // 第三列的合并方法
              const row3 = this.feeArr[rowIndex];
              const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row3,
                colspan: col3,
              };
            }
          },

# 以上代码经过本人努力，测试成功，大家可以踊跃尝试更好方法，希望大家不吝赐教，共同进步！！！ #

## 当然也有小bug，当你鼠标移动到上面时hover不准确，当然肯定是有办法滴----cell-mouse-enter cell-mouse-leave cell-class-name ##

这三个方法可以有效修改，但我还是没搞太懂，就不献丑了，大家可以去看看这位兄台的[小白变怪兽文章url][url]

### 源码奉上 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODUxNjY4OA_size_16_color_FFFFFF_t_70]: /images/20220329/69f0b898649e49fe864e219dbce85469.png
[url]: https://blog.csdn.net/u013558749/article/details/82257168