最近遇到一个需求,需要实现多级合并单元格,在此记录一下。
1.需求
需要得到如下所示的表格:
后端给的数据如下:
tableData6: [
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id1",
projects_detail_name: "二级项目名称",
},
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id2",
projects_detail_name: "二级项目名称",
},
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id3",
projects_detail_name: "二级项目名称",
},
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id2",
project_name: "一级项目名称",
acceptance_id: "2",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id4",
projects_detail_name: "二级项目名称",
},
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id2",
project_name: "一级项目名称",
acceptance_id: "2",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id5",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id1",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id2",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id3",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id2",
project_name: "一级项目名称",
acceptance_id: "2",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id4",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id2",
project_name: "一级项目名称",
acceptance_id: "2",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id5",
projects_detail_name: "二级项目名称",
},
],
2.概念
1.首先我们要知道的知识点:
Element为我们提供了一个合并行或列的计算方法:span-method
,该方法接收4个参数Function({ row, column, rowIndex, columnIndex })
- row:当前行值,也就是tableData里的值
- column:当前列的值,也就是tableData里的值
- rowIndex:当前行的序号(从0开始)
- columnIndex:当前列的序号(从0开始)
该方法return一个对象{rowspan,colspan}
- rowspan:表示合并多少行
- colspan:表示合并多少列
- 如果是(0,0)表示不展示这条数据
2.接着来理清我们的思路
我们这个需求需要实现的是合并列,如果是从0开始的话,我们需要的是合并第0、1、2、4列,其实我们会发现其中第0列和第4列合并的单元格时一致的,第1和2列合并的单元格是一致的。
那怎么知道我们需要合并的列数呢?那就需要通过返回的数据对其进行判断了,由数据推理可得,当id值一致时,表示是同一个产品,当project_id或者是acceptance_id相同时表示是同一个一级项目和允收标准。
3.实现
废话不多说,直接上代码
<template>
<div class="main-content">
<div class="filter-box">
<!-- 头部标题文件 -->
<div class="filter-header">
<div class="filter-header_title">
{
{menuStr.title}}
</div>
<el-button type="success" class="operate-btn" size="small" @click="formModalFun()" icon="el-icon-plus">新增</el-button>
</div>
</div>
<div class="main-table">
<!-- 尾部表格部分 -->
<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" v-loading.body="listLoading" class-name="tables" border>
<el-table-column prop