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

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

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

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

第一步 给出的样式

我们需要的表格样式

第二步：代码开撸

首先在data中新建变量
  1. data() { 
  2.      return { 
  3.        skuListInfo: [ // 假数据
  4.          { 
  5.            id: 1,
  6.            name: '普通门店',
  7.            storeIds: [1, 2, 3, 4],
  8.            storeIdInfo: '[1, 2, 3, 4]',
  9.            productType: '1',
  10.            productInfo: '日托',
  11.            mergeId: 1,
  12.            feeType: '1',
  13.            feeTypeInfo: '学费',
  14.            billing: '月/季/年制度',
  15.          },
  16.          { 
  17.            id: 2,
  18.            name: '普通门店',
  19.            storeIds: [1, 2, 3, 4],
  20.            storeIdInfo: '[1, 2, 3, 4]',
  21.            productType: '2',
  22.            productInfo: '晚托',
  23.            feeType: '1',
  24.            mergeId: 1,
  25.            feeTypeInfo: '学费',
  26.            billing: '月/季/年制度',
  27.          },
  28.          { 
  29.            id: 3,
  30.            name: '普通门店',
  31.            storeIds: [1, 2, 3, 4],
  32.            storeIdInfo: '[1, 2, 3, 4]',
  33.            productType: '3',
  34.            productInfo: '临时托',
  35.            feeType: '1',
  36.            mergeId: 1,
  37.            feeTypeInfo: '学费',
  38.            billing: '月/季/年制度',
  39.          },
  40.          { 
  41.            id: 4,
  42.            name: '普通门店',
  43.            storeIds: [1, 2, 3, 4],
  44.            storeIdInfo: '[1, 2, 3, 4]',
  45.            productType: '4',
  46.            productInfo: '越拖',
  47.            feeType: '1',
  48.            mergeId: 1,
  49.            feeTypeInfo: '学费',
  50.            billing: '月/季/年制度',
  51.          },
  52.          { 
  53.            id: 9,
  54.            name: '普通门店',
  55.            storeIds: [1, 2, 3, 4],
  56.            storeIdInfo: '[1, 2, 3, 4]',
  57.            productType: '4',
  58.            productInfo: '全部',
  59.            feeType: '2',
  60.            mergeId: 1,
  61.            feeTypeInfo: '定金',
  62.            billing: '月/季/年制度',
  63.          },
  64.          { 
  65.            id: 10,
  66.            name: '普通门店',
  67.            storeIds: [1, 2, 3, 4],
  68.            storeIdInfo: '[1, 2, 3, 4]',
  69.            productType: '4',
  70.            productInfo: '全部',
  71.            feeType: '3',
  72.            mergeId: 1,
  73.            feeTypeInfo: '学杂费',
  74.            billing: '月/季/年制度',
  75.          },
  76.          { 
  77.            id: 5,
  78.            name: '团购',
  79.            storeIds: [1, 2, 3, 4],
  80.            storeIdInfo: '[1, 2, 3, 4]',
  81.            productType: '5',
  82.            productInfo: '寒假托',
  83.            feeType: '2',
  84.            mergeId: 1,
  85.            feeTypeInfo: '定金',
  86.            billing: '月/季/年制度',
  87.          },
  88.          { 
  89.            id: 6,
  90.            name: '团购',
  91.            storeIds: [1, 2, 3, 4],
  92.            storeIdInfo: '[1, 2, 3, 4]',
  93.            productType: '5',
  94.            productInfo: '日托',
  95.            feeType: '1',
  96.            mergeId: 1,
  97.            feeTypeInfo: '学费',
  98.            billing: '月/季/年制度',
  99.          },
  100.          { 
  101.            id: 7,
  102.            name: '团购',
  103.            storeIds: [1, 2, 3, 4],
  104.            storeIdInfo: '[1, 2, 3, 4]',
  105.            productType: '5',
  106.            productInfo: '晚托',
  107.            feeType: '1',
  108.            mergeId: 1,
  109.            feeTypeInfo: '学费',
  110.            billing: '月/季/年制度',
  111.          },
  112.          { 
  113.            id: 8,
  114.            name: '大客户',
  115.            storeIds: [1, 2, 3, 4],
  116.            storeIdInfo: '[1, 2, 3, 4]',
  117.            productType: '6',
  118.            productInfo: '暑假托',
  119.            feeType: '3',
  120.            mergeId: 1,
  121.            feeTypeInfo: '学杂费',
  122.            billing: '月/季/年制度',
  123.          },
  124.        ],
  125.        typeNameArr: [],  // 第一列进行合并操作时存放的数组变量
  126.        typeNamePos: 0, // 上面的数组的下标值
  127.        storeArr: [],  // 第二列进行合并操作时存放的数组变量
  128.        storePos: 0,// 上面的数组的下标值
  129.        feeArr: [], // 第三列进行合并操作时存放的数组变量
  130.        feePos: 0,// 上面的数组的下标值
  131.      };
  132.    },
接着初始化上述定义的变量
  1. merageInit() {  // 在下文的时候会用到，对数据进行初始化是很有必要的
  2.         this.typeNameArr = [];
  3.         this.typeNamePos = 0;
  4.         this.storeArr = [];
  5.         this.storePos = 0;
  6.         this.feeArr = [];
  7.         this.feePos = 0;
  8.       },

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

  1. merage() { 
  2.         this.merageInit(); // 前文的初始化数据函数
  3.         for (let i = 0; i < this.skuListInfo.length; i += 1) { 
  4.           if (i === 0) { 
  5.             // 第一行必须存在
  6.             this.typeNameArr.push(1);
  7.             this.typeNamePos = 0;
  8.             this.storeArr.push(1);
  9.             this.storePos = 0;
  10.             this.feeArr.push(1);
  11.             this.feePos = 0;
  12.           } else { 
  13.             // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
  14.             // 第一列 下面的是eslint的不限制语法
  15.             // eslint-disable-next-line no-lonely-if 
  16.             if (this.skuListInfo[i].name === this.skuListInfo[i - 1].name) { 
  17.               this.typeNameArr[this.typeNamePos] += 1;
  18.               this.typeNameArr.push(0);
  19.             } else { 
  20.               this.typeNameArr.push(1);
  21.               this.typeNamePos = i;
  22.             }
  23.             // 第二列
  24.             if (this.skuListInfo[i].storeIdInfo === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
  25.               this.skuListInfo[i - 1].name) { 
  26.               this.storeArr[this.storePos] += 1;
  27.               this.storeArr.push(0);
  28.             } else { 
  29.               this.storeArr.push(1);
  30.               this.storePos = i;
  31.             }
  32.             // 第三列
  33.             if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIdInfo
  34.               === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
  35.               this.skuListInfo[i - 1].name) { 
  36.               this.feeArr[this.feePos] += 1;
  37.               this.feeArr.push(0);
  38.             } else { 
  39.               this.feeArr.push(1);
  40.               this.feePos = i;
  41.             }
  42.           }
  43.         }
  44.       },

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

  1. objectSpanMethod({  row, column, rowIndex, columnIndex }) { 
  2.       // if (columnIndex === 0) { // 用于设置要合并的列
  3.       // if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
  4.       // return { 
  5.       // rowspan: 2, // 合并的行数
  6.       // colspan: 1, // 合并的猎术, 设置为0则直接不显示
  7.       // };
  8.       // }
  9.       // return { 
  10.       // rowspan: 0,
  11.       // colspan: 0,
  12.       // };
  13.       // }
  14.         if (columnIndex === 0) { 
  15.           // 第一列的合并方法
  16.           const row1 = this.typeNameArr[rowIndex];
  17.           const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
  18.           return { 
  19.             rowspan: row1,
  20.             colspan: col1,
  21.           };
  22.         } else if (columnIndex === 1) { 
  23.           // 第二列的合并方法
  24.           const row2 = this.storeArr[rowIndex];
  25.           const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
  26.           return { 
  27.             rowspan: row2,
  28.             colspan: col2,
  29.           };
  30.         } else if (columnIndex === 2) { 
  31.           // 第三列的合并方法
  32.           const row3 = this.feeArr[rowIndex];
  33.           const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
  34.           return { 
  35.             rowspan: row3,
  36.             colspan: col3,
  37.           };
  38.         }
  39.       },

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

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

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

源码奉上

  1. <template>
  2.   <div>
  3.     <div class="panel">
  4.       1231
  5.     </div>
  6.     <div class="panel">
  7.       <el-table :data="skuListInfo" :span-method="objectSpanMethod" border>
  8.         <el-table-column prop="name" label="名称">
  9.         </el-table-column>
  10.         <el-table-column prop="storeIds" label="适应门店">
  11.         </el-table-column>
  12.         <el-table-column prop="feeTypeInfo" label="费用类型">
  13.         </el-table-column>
  14.         <el-table-column prop="productInfo" label="适用产品">
  15.         </el-table-column>
  16.         <el-table-column prop="billing" label="计费方法">
  17.         </el-table-column>
  18.       </el-table>
  19.     </div>
  20.   </div>
  21. </template>
  23. <script>
  24.   export default { 
  25.     data() { 
  26.       return { 
  27.         skuListInfo: [
  28.           { 
  29.             id: 1,
  30.             name: '普通门店',
  31.             storeIds: [1, 2, 3, 4],
  32.             storeIdInfo: '[1, 2, 3, 4]',
  33.             productType: '1',
  34.             productInfo: '日托',
  35.             mergeId: 1,
  36.             feeType: '1',
  37.             feeTypeInfo: '学费',
  38.             billing: '月/季/年制度',
  39.           },
  40.           { 
  41.             id: 2,
  42.             name: '普通门店',
  43.             storeIds: [1, 2, 3, 4],
  44.             storeIdInfo: '[1, 2, 3, 4]',
  45.             productType: '2',
  46.             productInfo: '晚托',
  47.             feeType: '1',
  48.             mergeId: 1,
  49.             feeTypeInfo: '学费',
  50.             billing: '月/季/年制度',
  51.           },
  52.           { 
  53.             id: 3,
  54.             name: '普通门店',
  55.             storeIds: [1, 2, 3, 4],
  56.             storeIdInfo: '[1, 2, 3, 4]',
  57.             productType: '3',
  58.             productInfo: '临时托',
  59.             feeType: '1',
  60.             mergeId: 1,
  61.             feeTypeInfo: '学费',
  62.             billing: '月/季/年制度',
  63.           },
  64.           { 
  65.             id: 4,
  66.             name: '普通门店',
  67.             storeIds: [1, 2, 3, 4],
  68.             storeIdInfo: '[1, 2, 3, 4]',
  69.             productType: '4',
  70.             productInfo: '越拖',
  71.             feeType: '1',
  72.             mergeId: 1,
  73.             feeTypeInfo: '学费',
  74.             billing: '月/季/年制度',
  75.           },
  76.           { 
  77.             id: 9,
  78.             name: '普通门店',
  79.             storeIds: [1, 2, 3, 4],
  80.             storeIdInfo: '[1, 2, 3, 4]',
  81.             productType: '4',
  82.             productInfo: '全部',
  83.             feeType: '2',
  84.             mergeId: 1,
  85.             feeTypeInfo: '定金',
  86.             billing: '月/季/年制度',
  87.           },
  88.           { 
  89.             id: 10,
  90.             name: '普通门店',
  91.             storeIds: [1, 2, 3, 4],
  92.             storeIdInfo: '[1, 2, 3, 4]',
  93.             productType: '4',
  94.             productInfo: '全部',
  95.             feeType: '3',
  96.             mergeId: 1,
  97.             feeTypeInfo: '学杂费',
  98.             billing: '月/季/年制度',
  99.           },
  100.           { 
  101.             id: 5,
  102.             name: '团购',
  103.             storeIds: [1, 2, 3, 4],
  104.             storeIdInfo: '[1, 2, 3, 4]',
  105.             productType: '5',
  106.             productInfo: '寒假托',
  107.             feeType: '2',
  108.             mergeId: 1,
  109.             feeTypeInfo: '定金',
  110.             billing: '月/季/年制度',
  111.           },
  112.           { 
  113.             id: 6,
  114.             name: '团购',
  115.             storeIds: [1, 2, 3, 4],
  116.             storeIdInfo: '[1, 2, 3, 4]',
  117.             productType: '5',
  118.             productInfo: '日托',
  119.             feeType: '1',
  120.             mergeId: 1,
  121.             feeTypeInfo: '学费',
  122.             billing: '月/季/年制度',
  123.           },
  124.           { 
  125.             id: 7,
  126.             name: '团购',
  127.             storeIds: [1, 2, 3, 4],
  128.             storeIdInfo: '[1, 2, 3, 4]',
  129.             productType: '5',
  130.             productInfo: '晚托',
  131.             feeType: '1',
  132.             mergeId: 1,
  133.             feeTypeInfo: '学费',
  134.             billing: '月/季/年制度',
  135.           },
  136.           { 
  137.             id: 8,
  138.             name: '大客户',
  139.             storeIds: [1, 2, 3, 4],
  140.             storeIdInfo: '[1, 2, 3, 4]',
  141.             productType: '6',
  142.             productInfo: '暑假托',
  143.             feeType: '3',
  144.             mergeId: 1,
  145.             feeTypeInfo: '学杂费',
  146.             billing: '月/季/年制度',
  147.           },
  148.         ],
  149.         typeNameArr: [],
  150.         typeNamePos: 0,
  151.         storeArr: [],
  152.         storePos: 0,
  153.         feeArr: [],
  154.         feePos: 0,
  155.         hoverOrderArr: [],
  156.       };
  157.     },
  158.     mounted() { 
  159.       this.merage();
  160.     },
  161.     methods: { 
  162.       merageInit() { 
  163.         this.typeNameArr = [];
  164.         this.typeNamePos = 0;
  165.         this.storeArr = [];
  166.         this.storePos = 0;
  167.         this.feeArr = [];
  168.         this.feePos = 0;
  169.       },
  170.       merage() { 
  171.         this.merageInit();
  172.         for (let i = 0; i < this.skuListInfo.length; i += 1) { 
  173.           if (i === 0) { 
  174.             // 第一行必须存在
  175.             this.typeNameArr.push(1);
  176.             this.typeNamePos = 0;
  177.             this.storeArr.push(1);
  178.             this.storePos = 0;
  179.             this.feeArr.push(1);
  180.             this.feePos = 0;
  181.           } else { 
  182.             // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
  183.             // 第一列
  184.             // eslint-disable-next-line no-lonely-if
  185.             if (this.skuListInfo[i].name === this.skuListInfo[i - 1].name) { 
  186.               this.typeNameArr[this.typeNamePos] += 1;
  187.               this.typeNameArr.push(0);
  188.             } else { 
  189.               this.typeNameArr.push(1);
  190.               this.typeNamePos = i;
  191.             }
  192.             // 第二列
  193.             if (this.skuListInfo[i].storeIdInfo === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
  194.               this.skuListInfo[i - 1].name) { 
  195.               this.storeArr[this.storePos] += 1;
  196.               this.storeArr.push(0);
  197.             } else { 
  198.               this.storeArr.push(1);
  199.               this.storePos = i;
  200.             }
  201.             // 第三列
  202.             if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIdInfo
  203.               === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
  204.               this.skuListInfo[i - 1].name) { 
  205.               this.feeArr[this.feePos] += 1;
  206.               this.feeArr.push(0);
  207.             } else { 
  208.               this.feeArr.push(1);
  209.               this.feePos = i;
  210.             }
  211.           }
  212.         }
  213.       },
  214.       objectSpanMethod({  row, column, rowIndex, columnIndex }) { 
  215.       // if (columnIndex === 0) { // 用于设置要合并的列
  216.       // if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
  217.       // return { 
  218.       // rowspan: 2, // 合并的行数
  219.       // colspan: 1, // 合并的猎术, 设置为0则直接不显示
  220.       // };
  221.       // }
  222.       // return { 
  223.       // rowspan: 0,
  224.       // colspan: 0,
  225.       // };
  226.       // }
  227.         if (columnIndex === 0) { 
  228.           // 第一列的合并方法
  229.           const row1 = this.typeNameArr[rowIndex];
  230.           const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
  231.           return { 
  232.             rowspan: row1,
  233.             colspan: col1,
  234.           };
  235.         } else if (columnIndex === 1) { 
  236.           // 第二列的合并方法
  237.           const row2 = this.storeArr[rowIndex];
  238.           const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
  239.           return { 
  240.             rowspan: row2,
  241.             colspan: col2,
  242.           };
  243.         } else if (columnIndex === 2) { 
  244.           // 第三列的合并方法
  245.           const row3 = this.feeArr[rowIndex];
  246.           const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
  247.           return { 
  248.             rowspan: row3,
  249.             colspan: col3,
  250.           };
  251.         }
  252.       },
  253.     },
  254.   };
  255. </script>
  257. <style lang="less" scoped> </style>

发表评论

表情：
评论列表 （有 0 条评论，2231人围观）

还没有评论，来说两句吧...

相关阅读