Vben admin - 表格组件合并单元格

原创

已于 2023-10-27 14:49:56 修改 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vben 表格合并 #合并单元格 #vben admin #tabel 合并单元格 #vue合并单元格

于 2023-10-27 13:44:04 首次发布

本文介绍了如何在Vben框架中处理一个需求，即合并表格中的内容和操作列，当一级分类值相同时。作者通过数据处理和自定义渲染实现了合并功能，包括分数、一级分类和编辑分数列。展示了详细的代码实现和最终效果。

需求

最近在项目中有需求需要表格合并单元格，不但内容有合并的，操作列也需要合并，找遍vben官方例子，没有实现操作列合并的，只能硬着头皮实现，还好实现了，下面具体就是实现思路；

原型设计图

在这里插入图片描述

分析需求

整体思路就是当数据中一级分类值相同则进行合并分数、一级分类以及编辑分数（操作列），由于操作列合并vben框架目前不支持，只能在数据上下功夫，假设表格数据中每组数据返回字段operatorName：‘操作’；这样我们就像渲染普通数据一样渲染出来，然后再给器操作加上事件即可

合并核心思路

let newArr = data.reduce((result, item) => {
   
   
     // 首先将字段作为新数组result取出
     if (result.indexOf(item['name']) < 0) {
   
   
       result.push(item['name']);
     }
     return result;
   }, []).reduce((res, name) => {
   
   
     // 将name相同的数据作为新数组取出，并在其内部添加新字段**rowSpan**
     const children = data.filter((item) => item['name'] === name);
     // eslint-disable-next-line no-param-reassign
     res = res.concat(
       children.map((item, index) => ({
   
   
         ...item,
         ['rowspan']: index === 0 ? children.length : 0, // 将第一行数据添加rowSpan字段
       })),
     );
     return res;
   }, []);

整体代码

const [registerTable] = useTable({
   
   
  title: '合并单元格',

最低0.47元/天解锁文章