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

Posted WHOVENLY

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Eement UI 中 Table 表格 多级合并单元格方式相关的知识,希望对你有一定的参考价值。

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

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="name" label="产品名称" align="center"></el-table-column>
        <el-table-column prop="project_name" label="一级项目" align="center"></el-table-column>
        <el-table-column prop="acceptance_name" label="允收标准" align="center"></el-table-column>
        <el-table-column prop="config_name" label="二级项目" align="center"></el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="info" size="small" icon="el-icon-edit" :disabled="scope.row.disable_edit" @click="formModalFun(scope.row.id,scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="复制配置" placement="top">
              <el-button type="info" size="small" icon="el-icon-copy-document" :disabled="scope.row.disable_edit" @click="copyConfigFun(scope.row.id,scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteList(scope.row.id,scope.row.name)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      spanArr: [], //用于存放每一行记录的合并数
      spanArr2: [],
      pos2: 0,
      pos: 0,
      tableData: [
        
          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: "二级项目名称",
        ,
      ],
    ;
  ,
  mounted: function () 
    tthis.getSpanArr(this.tableData);
  ,
  methods: 
    getSpanArr(data) 
      for (var i = 0; i < data.length; i++) 
        if (i === 0) 
          // 初始化【产品名称】存放每一行记录的合并数数组
          this.spanArr.push(1);
          this.pos = 0;
          // 初始化【一级项目】存放每一行记录的合并数数组
          this.spanArr2.push(1);
          this.pos2 = 0;
         else 
          // 【产品名称】
          if (data[i].id === data[i - 1].id) 
            // 若当前元素与上一个元素是否相同
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
           else 
            this.spanArr.push(1);
            this.pos = i;
          
          // 【一级项目】
          if (data[i].acceptance_id === data[i - 1].acceptance_id) 
            // 若当前元素与上一个元素是否相同,则为数组添加0
            this.spanArr2[this.pos2] += 1;
            this.spanArr2.push(0);
           else 
            this.spanArr2.push(1);
            this.pos2 = i;
          
        
      
    ,
    objectSpanMethod( row, column, rowIndex, columnIndex ) 
      //【产品名称】和【操作】
      // 如果是第0列或者第4列
      if (columnIndex === 0 || columnIndex === 4) 
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log("columnIndex", `rowspan:$_row colspan:$_col`);
        return 
          rowspan: _row,
          colspan: _col,
        ;
      
      //【一级项目】和【二级项目】
      // 如果是第1列或者第2列
      if (columnIndex === 1 || columnIndex === 2) 
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log("columnIndex", `rowspan:$_row colspan:$_col`);
        return 
          rowspan: _row,
          colspan: _col,
        ;
      
    ,
    deleteList(id, name) 
    ,
  ,
;
</script>

以上是关于Eement UI 中 Table 表格 多级合并单元格方式的主要内容,如果未能解决你的问题,请参考以下文章

Element-UI实现复杂table表格结构

表头多级表头及单元格合并,表格合并行或列

Element-ui 表格 (Table) 组件中动态合并单元格

vue+element ui el-table 完成动态添加表格&&动态合并/踩坑记录

使用element-ui中的table表格多行合并

element-UI table动态增加列,动态增加行,动态合并行。选择编辑表头行数据