devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用_el-table合并行

作者：我家小花儿 | 2024-05-25 09:52:11

赞

踩

el-table合并行

前言

有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。

一、多列合并

1.示例代码

（1）/src/views/Example/MergeCell/index_1.vue

  1. <template>
  2.   <div class="merge-cell">
  3.     <div class="merge-cell-navbar">记录一下 el-table 合并行小技巧</div>
  4.  
  5.     <div class="merge-cell-content">
  6.       <div class="merge-cell-content-container">
  7.         <el-table
  8.           :data="tableData"
  9.           border
  10.           height="100%"
  11.           :header-cell-style="
  12.             {
  13.               padding: '4px', // 设置Table表头单元内边距
  14.               backgroundColor: '#e7f0ff', // 设置Table表头背景颜色
  15.               borderColor: '#b6d1ff', // 设置Table表头边框颜色
  16.               color: '#000', // 设置Table表头文字颜色
  17.               fontSize: '13px', // 设置Table表头文字大小
  18.               fontWeight: 'normal', // 设置Table表头文字粗细
  19.             }
  20.           "
  21.           :span-method="handleSpanMethod"
  22.           :row-class-name="handleRowClassName"
  23.           @cell-mouse-enter="handleCellMouseEnter"
  24.           @cell-mouse-leave="handleCellMouseLeave"
  25.         >
  26.           <el-table-column prop="zone" label="GameZone / 服务器区域 / 游戏区域" align="center" />
  27.           <el-table-column prop="career" label="职业" width="180" align="center" />
  28.           <el-table-column label="英雄" align="center">
  29.             <el-table-column prop="hero" label="英雄姓名" width="280" align="center" />
  30.             <el-table-column prop="firstSkill" label="一技能" width="220" align="center" />
  31.             <el-table-column prop="secondSkill" label="二技能" width="220" align="center" />
  32.             <el-table-column prop="thirdSkill" label="三技能" width="220" align="center" />
  33.             <el-table-column label="操作" width="180" align="center">
  34.               <template #default="scope">
  35.                 <el-tooltip effect="dark" content="收藏" placement="top" :enterable="false" :hide-after="0" @click="handleEditClick(scope.$index, scope.row)">
  36.                   <el-button size="small" circle>
  37.                     <el-icon size="18"><StarFilled /></el-icon>
  38.                   </el-button>
  39.                 </el-tooltip>
  40.               </template>
  41.             </el-table-column>
  42.           </el-table-column>
  43.         </el-table>
  44.       </div>
  45.     </div>
  46.   </div>
  47. </template>
  48.  
  49. <script>
  50. export default {
  51.   data: () => ({
  52.     tableData: [
  53.       {
  54.         zone: "王者一区",
  55.         career: "坦克",
  56.         hero: "亚瑟",
  57.         firstSkill: "誓约之盾",
  58.         secondSkill: "回旋打击",
  59.         thirdSkill: "圣剑裁决",
  60.       },
  61.       {
  62.         zone: "王者一区",
  63.         career: "坦克",
  64.         hero: "吕布",
  65.         firstSkill: "方天画斩",
  66.         secondSkill: "贪狼之握",
  67.         thirdSkill: "魔神降世",
  68.       },
  69.       {
  70.         zone: "王者一区",
  71.         career: "坦克",
  72.         hero: "项羽",
  73.         firstSkill: "无畏冲锋",
  74.         secondSkill: "破釜沉舟",
  75.         thirdSkill: "霸王斩杀",
  76.       },
  77.       {
  78.         zone: "王者一区",
  79.         career: "战士",
  80.         hero: "云缨",
  81.         firstSkill: "断月",
  82.         secondSkill: "追云",
  83.         thirdSkill: "逐星",
  84.       },
  85.       {
  86.         zone: "王者一区",
  87.         career: "战士",
  88.         hero: "赵怀真",
  89.         firstSkill: "拨云见明",
  90.         secondSkill: "气定神凝",
  91.         thirdSkill: "阴阳逆转",
  92.       },
  93.       {
  94.         zone: "王者二区",
  95.         career: "刺客",
  96.         hero: "镜",
  97.         firstSkill: "开锋",
  98.         secondSkill: "裂空",
  99.         thirdSkill: "见影",
  100.       },
  101.       {
  102.         zone: "王者二区",
  103.         career: "刺客",
  104.         hero: "澜",
  105.         firstSkill: "破浪",
  106.         secondSkill: "断空",
  107.         thirdSkill: "处决",
  108.       },
  109.       {
  110.         zone: "王者二区",
  111.         career: "刺客",
  112.         hero: "李白",
  113.         firstSkill: "将进酒",
  114.         secondSkill: "神来之笔",
  115.         thirdSkill: "青莲剑歌",
  116.       },
  117.       {
  118.         zone: "王者三区",
  119.         career: "法师",
  120.         hero: "妲己",
  121.         firstSkill: "灵魂冲击",
  122.         secondSkill: "偶像魅力",
  123.         thirdSkill: "女王崇拜",
  124.       },
  125.       {
  126.         zone: "王者三区",
  127.         career: "射手",
  128.         hero: "后羿",
  129.         firstSkill: "多重箭矢",
  130.         secondSkill: "落日余晖",
  131.         thirdSkill: "灼日之矢",
  132.       },
  133.       {
  134.         zone: "王者三区",
  135.         career: "射手",
  136.         hero: "鲁班7号",
  137.         firstSkill: "河豚手雷",
  138.         secondSkill: "无敌鲨嘴炮",
  139.         thirdSkill: "空中支援",
  140.       },
  141.       {
  142.         zone: "王者三区",
  143.         career: "辅助",
  144.         hero: "孙膑",
  145.         firstSkill: "时空爆弹",
  146.         secondSkill: "时之波动",
  147.         thirdSkill: "时光流逝",
  148.       },
  149.       {
  150.         zone: "王者三区",
  151.         career: "辅助",
  152.         hero: "庄周",
  153.         firstSkill: "化蝶",
  154.         secondSkill: "蝴蝶效应",
  155.         thirdSkill: "天人合一",
  156.       },
  157.     ],
  158.  
  159.     first_row: {},
  160.     second_row: {},
  161.   }),
  162.   methods: {
  163.     /**
  164.      * 合并单元格句柄方法
  165.      */
  166.     handleSpanMethod({
  167.       row, // 行
  168.       column, // 列
  169.       rowIndex, // 行索引
  170.       columnIndex, // 列索引
  171.     }) {
  172.       if (columnIndex === 0 || columnIndex === 1) {
  173.         // 获取当前单元格的值
  174.         const currentValue = row[column.property];
  175.  
  176.         // 获取上一行相同列的值
  177.         const preRow = this.tableData[rowIndex - 1];
  178.         const preValue = preRow ? preRow[column.property] : null;
  179.  
  180.         // 如果当前值和上一行的值相同，则将当前单元格隐藏
  181.         if (currentValue === preValue) {
  182.           return { rowspan: 0, colspan: 0 };
  183.         } else {
  184.           // 否则计算当前单元格应该跨越多少行
  185.           let rowspan = 1;
  186.           for (let i = rowIndex + 1; i < this.tableData.length; i++) {
  187.             const nextRow = this.tableData[i];
  188.             const nextValue = nextRow[column.property];
  189.             if (nextValue === currentValue) {
  190.               rowspan++;
  191.             } else {
  192.               break;
  193.             }
  194.           }
  195.           return { rowspan, colspan: 1 };
  196.         }
  197.       }
  198.     },
  199.  
  200.     /**
  201.      * 鼠标移入表格事件句柄方法
  202.      */
  203.     handleCellMouseEnter(row, column, cell, event) {
  204.       this.second_row = this.tableData.filter((item) => {
  205.         return this.filterSameKeys(item, row, ["zone", "career"]);
  206.       })[0];
  207.  
  208.       this.first_row = this.tableData.filter((item) => {
  209.         return this.filterSameKeys(item, row, ["zone"]);
  210.       })[0];
  211.     },
  212.  
  213.     /**
  214.      * 鼠标移出表格事件句柄方法
  215.      */
  216.     handleCellMouseLeave() {
  217.       this.currentIndex = "";
  218.       this.currentColumnIndex = "";
  219.       this.first_row = {};
  220.       this.second_row = {};
  221.     },
  222.  
  223.     /**
  224.      * 根据 keys 数组所有字段去做合并
  225.      */
  226.     filterSameKeys(item, row, keys) {
  227.       let flag = true;
  228.       keys.forEach((key) => {
  229.         flag = flag && item[key] === row[key];
  230.       });
  231.       return flag;
  232.     },
  233.     
  234.     /**
  235.      * 给表格行添加自定义类名
  236.      */
  237.     handleRowClassName({ row }) {
  238.       let flag1 = this.first_row == row ? "first_row" : "";
  239.       let flag2 = this.second_row == row ? "second_row" : "";
  240.       return `${flag1} ${flag2}`;
  241.     },
  242.   },
  243. };
  244. </script>
  245.  
  246. <style lang="less" scoped>
  247.   .merge-cell {
  248.     display: flex;
  249.     flex-direction: column;
  250.     position: relative;
  251.     width: 100%;
  252.     height: 100%;
  253.     overflow: hidden;
  254.  
  255.     .merge-cell-navbar {
  256.       position: relative;
  257.       width: 100%;
  258.       height: 100px;
  259.       background-color: #686868;
  260.       text-align: center;
  261.       line-height: 100px;
  262.       color: #fff;
  263.       font-size: 25px;
  264.     }
  265.  
  266.     .merge-cell-content {
  267.       position: relative;
  268.       flex: 1;
  269.       padding: 100px;
  270.       overflow: hidden;
  271.  
  272.       .merge-cell-content-container {
  273.         position: relative;
  274.         width: 100%;
  275.         height: 100%;
  276.         overflow: auto;
  277.       }
  278.     }
  279.  
  280.     :deep(.el-table) {
  281.  
  282.       td .cell {
  283.         padding: 2.5px 0;
  284.         color: #686868;
  285.         font-size: 13px;
  286.       }
  287.  
  288.       .first_row td:nth-child(1),
  289.       .second_row td:nth-child(1),
  290.       .first_row.second_row td:nth-child(2) {
  291.           background: #f5f7fa !important;
  292.       }
  293.     }
  294.  
  295.     /* ^ 设置Table表格边框颜色 */
  296.     :deep(.el-table--border) {
  297.       &::before {
  298.         background-color: #b6d1ff;
  299.       }
  300.       &::after {
  301.         background-color: #b6d1ff;
  302.       }
  303.       .el-table__cell {
  304.         border-color: #b6d1ff;
  305.       }
  306.       .el-table__inner-wrapper {
  307.         &::before {
  308.           background-color: #b6d1ff;
  309.         }
  310.         &::after {
  311.           background-color: #b6d1ff;
  312.         }
  313.         .el-table__border-left-patch {
  314.           background-color: #b6d1ff;
  315.         }
  316.       }
  317.     }
  318.     /* / 设置Table表格边框颜色 */
  319.   }
  320. </style>

2.运行效果

3.转载地址

https://juejin.cn/post/6930897196732645390

二、单列合并

1.示例代码

（1）/src/views/Example/MergeCell/index_2.vue

  1. <template>
  2.   <div class="merge-cell">
  3.     <div class="merge-cell-navbar">记录一下 el-table 合并行小技巧</div>
  4.  
  5.     <div class="merge-cell-content">
  6.       <div class="merge-cell-content-container">
  7.         <el-table
  8.           :data="tableData"
  9.           border
  10.           height="100%"
  11.           :header-cell-style="
  12.             {
  13.               padding: '4px', // 设置Table表头单元内边距
  14.               backgroundColor: '#e7f0ff', // 设置Table表头背景颜色
  15.               borderColor: '#b6d1ff', // 设置Table表头边框颜色
  16.               color: '#000', // 设置Table表头文字颜色
  17.               fontSize: '13px', // 设置Table表头文字大小
  18.               fontWeight: 'normal', // 设置Table表头文字粗细
  19.             }
  20.           "
  21.           :span-method="handleSpanMethod"
  22.         >
  23.           <el-table-column prop="zone" label="GameZone / 服务器区域 / 游戏区域" align="center" />
  24.           <el-table-column prop="career" label="职业" width="180" align="center" />
  25.           <el-table-column label="英雄" align="center">
  26.             <el-table-column prop="hero" label="英雄姓名" width="280" align="center" />
  27.             <el-table-column prop="firstSkill" label="一技能" width="220" align="center" />
  28.             <el-table-column prop="secondSkill" label="二技能" width="220" align="center" />
  29.             <el-table-column prop="thirdSkill" label="三技能" width="220" align="center" />
  30.             <el-table-column label="操作" width="180" align="center">
  31.               <template #default="scope">
  32.                 <el-tooltip effect="dark" content="收藏" placement="top" :enterable="false" :hide-after="0" @click="handleEditClick(scope.$index, scope.row)">
  33.                   <el-button size="small" circle>
  34.                     <el-icon size="18"><StarFilled /></el-icon>
  35.                   </el-button>
  36.                 </el-tooltip>
  37.               </template>
  38.             </el-table-column>
  39.           </el-table-column>
  40.         </el-table>
  41.       </div>
  42.     </div>
  43.   </div>
  44. </template>
  45.  
  46. <script>
  47. export default {
  48.   data: () => ({
  49.     tableData: [
  50.       {
  51.         zone: "王者一区",
  52.         career: "坦克",
  53.         hero: "亚瑟",
  54.         firstSkill: "誓约之盾",
  55.         secondSkill: "回旋打击",
  56.         thirdSkill: "圣剑裁决",
  57.       },
  58.       {
  59.         zone: "王者一区",
  60.         career: "坦克",
  61.         hero: "吕布",
  62.         firstSkill: "方天画斩",
  63.         secondSkill: "贪狼之握",
  64.         thirdSkill: "魔神降世",
  65.       },
  66.       {
  67.         zone: "王者一区",
  68.         career: "坦克",
  69.         hero: "项羽",
  70.         firstSkill: "无畏冲锋",
  71.         secondSkill: "破釜沉舟",
  72.         thirdSkill: "霸王斩杀",
  73.       },
  74.       {
  75.         zone: "王者一区",
  76.         career: "战士",
  77.         hero: "云缨",
  78.         firstSkill: "断月",
  79.         secondSkill: "追云",
  80.         thirdSkill: "逐星",
  81.       },
  82.       {
  83.         zone: "王者一区",
  84.         career: "战士",
  85.         hero: "赵怀真",
  86.         firstSkill: "拨云见明",
  87.         secondSkill: "气定神凝",
  88.         thirdSkill: "阴阳逆转",
  89.       },
  90.       {
  91.         zone: "王者二区",
  92.         career: "刺客",
  93.         hero: "镜",
  94.         firstSkill: "开锋",
  95.         secondSkill: "裂空",
  96.         thirdSkill: "见影",
  97.       },
  98.       {
  99.         zone: "王者二区",
  100.         career: "刺客",
  101.         hero: "澜",
  102.         firstSkill: "破浪",
  103.         secondSkill: "断空",
  104.         thirdSkill: "处决",
  105.       },
  106.       {
  107.         zone: "王者二区",
  108.         career: "刺客",
  109.         hero: "李白",
  110.         firstSkill: "将进酒",
  111.         secondSkill: "神来之笔",
  112.         thirdSkill: "青莲剑歌",
  113.       },
  114.       {
  115.         zone: "王者三区",
  116.         career: "法师",
  117.         hero: "妲己",
  118.         firstSkill: "灵魂冲击",
  119.         secondSkill: "偶像魅力",
  120.         thirdSkill: "女王崇拜",
  121.       },
  122.       {
  123.         zone: "王者三区",
  124.         career: "射手",
  125.         hero: "后羿",
  126.         firstSkill: "多重箭矢",
  127.         secondSkill: "落日余晖",
  128.         thirdSkill: "灼日之矢",
  129.       },
  130.       {
  131.         zone: "王者三区",
  132.         career: "射手",
  133.         hero: "鲁班7号",
  134.         firstSkill: "河豚手雷",
  135.         secondSkill: "无敌鲨嘴炮",
  136.         thirdSkill: "空中支援",
  137.       },
  138.       {
  139.         zone: "王者三区",
  140.         career: "辅助",
  141.         hero: "孙膑",
  142.         firstSkill: "时空爆弹",
  143.         secondSkill: "时之波动",
  144.         thirdSkill: "时光流逝",
  145.       },
  146.       {
  147.         zone: "王者三区",
  148.         career: "辅助",
  149.         hero: "庄周",
  150.         firstSkill: "化蝶",
  151.         secondSkill: "蝴蝶效应",
  152.         thirdSkill: "天人合一",
  153.       },
  154.     ],
  155.  
  156.     first_row: {},
  157.     second_row: {},
  158.   }),
  159.   methods: {
  160.     /**
  161.      * 合并单元格句柄方法
  162.      */
  163.     handleSpanMethod({
  164.       row, // 行
  165.       column, // 列
  166.       rowIndex, // 行索引
  167.       columnIndex, // 列索引
  168.     }) {
  169.       const rowspanArr = this.formatRowspanAndColspan(this.tableData, 'zone')
  170.       if (columnIndex === 0) {
  171.         // console.log('row =>', row)
  172.         // console.log('column =>', column)
  173.         // console.log('rowIndex =>', rowIndex)
  174.         // console.log('columnIndex =>', columnIndex)
  175.         // console.log('\n')
  176.         return {
  177.           rowspan: rowspanArr[rowIndex],
  178.           colspan: 1
  179.         }
  180.       }
  181.     },
  182.  
  183.     /**
  184.      * 合并单元格辅助 
  185.      */
  186.     formatRowspanAndColspan(tableList, keyName) {
  187.       const keyNameList = []
  188.       tableList.forEach(
  189.         t => {keyNameList.push(t[keyName])}
  190.       )
  191.       // console.log('keyNameList =>', keyNameList)
  192.  
  193.       let prev // 上一个键名的索引
  194.       let contin = 0 // 连续相同键名个数
  195.       const computedList = [] // 计算后的键名列表
  196.       for (let i = 0; i < keyNameList.length; i++) {
  197.         if (computedList.length === 0) {
  198.           computedList.push({ 'key': keyNameList[i], 'val': 1 })
  199.         } else {
  200.           if (keyNameList[prev] === keyNameList[i]) {
  201.             contin++
  202.             computedList.push({ 'key': keyNameList[i], 'val': 0 })
  203.           } else {
  204.             if (contin > 0) {
  205.               const index = computedList.length - 1 - contin
  206.               const key = computedList[index].key
  207.               const val = computedList[index].val
  208.               const obj = { 'key': key, 'val': val + contin}
  209.               computedList.splice(index, 1, obj)
  210.             }
  211.             computedList.push({ 'key': keyNameList[i], 'val': 1 })
  212.             contin = 0
  213.           }
  214.         }
  215.  
  216.         prev = i // 将 i 赋值给 prev，以便当下一次循环时获取上一个键值的索引
  217.       }
  218.       if (contin > 0) {
  219.         const index = computedList.length - 1 - contin
  220.         const key = computedList[index].key
  221.         const val = computedList[index].val
  222.         const obj = { 'key': key, 'val': val + contin}
  223.         computedList.splice(index, 1, obj)
  224.       }
  225.       // console.log('computedList =>', computedList)
  226.  
  227.       const finalList = []
  228.       computedList.forEach(
  229.         t => {finalList.push(t.val)}
  230.       )
  231.       // console.log('finalList =>', finalList)
  232.  
  233.       return finalList
  234.     },
  235.   },
  236. };
  237. </script>
  238.  
  239. <style lang="less" scoped>
  240.   .merge-cell {
  241.     display: flex;
  242.     flex-direction: column;
  243.     position: relative;
  244.     width: 100%;
  245.     height: 100%;
  246.     overflow: hidden;
  247.  
  248.     .merge-cell-navbar {
  249.       position: relative;
  250.       width: 100%;
  251.       height: 100px;
  252.       background-color: #686868;
  253.       text-align: center;
  254.       line-height: 100px;
  255.       color: #fff;
  256.       font-size: 25px;
  257.     }
  258.  
  259.     .merge-cell-content {
  260.       position: relative;
  261.       flex: 1;
  262.       padding: 100px;
  263.       overflow: hidden;
  264.  
  265.       .merge-cell-content-container {
  266.         position: relative;
  267.         width: 100%;
  268.         height: 100%;
  269.         overflow: auto;
  270.       }
  271.     }
  272.  
  273.     :deep(.el-table) {
  274.  
  275.       td .cell {
  276.         padding: 2.5px 0;
  277.         color: #686868;
  278.         font-size: 13px;
  279.       }
  280.  
  281.       .first_row td:nth-child(1),
  282.       .second_row td:nth-child(1),
  283.       .first_row.second_row td:nth-child(2) {
  284.           background: #f5f7fa !important;
  285.       }
  286.     }
  287.  
  288.     /* ^ 设置Table表格边框颜色 */
  289.     :deep(.el-table--border) {
  290.       &::before {
  291.         background-color: #b6d1ff;
  292.       }
  293.       &::after {
  294.         background-color: #b6d1ff;
  295.       }
  296.       .el-table__cell {
  297.         border-color: #b6d1ff;
  298.       }
  299.       .el-table__inner-wrapper {
  300.         &::before {
  301.           background-color: #b6d1ff;
  302.         }
  303.         &::after {
  304.           background-color: #b6d1ff;
  305.         }
  306.         .el-table__border-left-patch {
  307.           background-color: #b6d1ff;
  308.         }
  309.       }
  310.     }
  311.     /* / 设置Table表格边框颜色 */
  312.   }
  313. </style>

2.运行效果

3.说明

单列合并的示例代码暂时还没修复当鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG，有空再研究修复一下。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/621560
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号