使用 vxe-table 实现分类展示样式（非树布局/非睁开行）

在开辟数据表格时，常常遇到须要将数据按种别分组展示的需求。通常我们会想到树形表格或睁开行，但偶然业务要求一个扁平的分类样式——即在表格顶部直接展示分组标题，下方列出该分组内的明细数据，而且分组标题可以高出整行。本文先容一种奇妙的实现方式：插入分类行 + 单元格归并，以模拟类似“分组报表”的视觉结果。
实现思绪

1.数据预处置惩罚：在原始数据中插入分类行（type: 'group'），并给每个分类行设定 level（层级）、count（数量）等元信息。
2.归并单元格：使用 vxe-table 的 mergeCells 设置，让分类行的第一列（或须要的列）超过全部列（或指定列范围），从而占满整行。
3.自界说渲染：通过列模板（slots）区分平凡行与分类行，为分类行渲染成夺目标标签样式，包罗分类名称和数量统计。
这种方法克制了复杂的树递归和睁开/折叠逻辑，非常得当静态分组或轻量级分类展示。
代码

分类行以带配景致的标签展示，并自动归并全部列，视觉上像是一个分组标题

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions">
4.       <template #group_name="{ row }">
5.         
6.           <vxe-tag :status="row.level === 1 ? 'success' : 'warning'" >{{ row.name }}</vxe-tag>
7.           数量：{{ row.count }}
8.         
9.         {{ row.seq }}
10.       </template>
11.     </vxe-grid>
12.   
13. </template>

复制代码

1.数据构造：分类行与明细行肴杂

• 分类行必须包罗 type: 'group' 标志，用于模板区分渲染逻辑。
  
• count 字段用于展示该分类下的记载条数。
  
• level 字段可以控制标签颜色（如一级分类绿色，二级分类橙色）。
  
• 明细行中的 seq 用于体现平凡序号；分类行的 seq 为空字符串。
  

2.单元格归并设置

• mergeCells 数组界说了哪些单元格须要归并。
  
• 每个对象包罗 row（行索引）、col（起始列索引）、rowspan（跨行数）、colspan（跨列数）。
  
• 分类行都在第0列开始归并覆盖全部5列，实现“一整块”的视觉结果。
  
• 行索引与 data 数组的序次逐一对应，插入分类行后索引会厘革，须要手动盘算或通过动态方法天生（也可通过盘算属性自动天生归并设置）。
  

3.自界说模板渲染

• 通过 slots.default 指定自界说名字 group_name，在模板中用 #group_name 吸收。
  
• 根据 row.type 判定是否为分类行，分别渲染标签或平凡序号。
  

动态天生归并设置的进阶方法

当数据量较大或分类行位置不确定时，可以动态天生 mergeCells：

1. function buildMergeCells(data) {
2.   const merges = []
3.   data.forEach((item, idx) => {
4.     if (item.type === 'group') {
5.       merges.push({ row: idx, col: 0, rowspan: 1, colspan: 5 })
6.     }
7.   })
8.   return merges
9. }

复制代码

将此函数盘算的结果赋值给 gridOptions.mergeCells，并确保数据厘革时重新天生。
https://vxetable.cn

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.