Eement UI 中 Table 表格多级合并单元格方式

最新推荐文章于 2024-06-21 11:27:06 发布

WHOVENLY

最新推荐文章于 2024-06-21 11:27:06 发布

阅读量428

点赞数

分类专栏： Element Vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/huanan__/article/details/120347746

版权

最近遇到一个需求，需要实现多级合并单元格，在此记录一下。

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