Vue2 +Element UI 表格行合并

news/2024/7/9 23:44:23 标签: vue, 前端, elementui

如果相邻数据是一致的,则单元格的行合并,指定需要合并的列,下面我是指定合并了分类和类型这两列。
先看效果
在这里插入图片描述Element UI为我们的<el-table>提供了一个属性span-method:合并行或列的计算方法
下面是一个示例:

html部分 - 主要是在表上指定span-method方法

<template>
  <div>
    <el-table :span-method="objectSpanMethod" :data="tableData" row-key="id" border>
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="分类" align="center"></el-table-column>
      <el-table-column prop="num" label="数量" align="center"></el-table-column>
      <el-table-column prop="type" label="类型" align="center"></el-table-column>
    </el-table>
  </div>
</template>

data部分 - 表格数据

data() {
    return {
      tableData: [{
        name: '咖啡',
        num: '2',
        type: '饮料'
      },
        {
          name: '咖啡',
          num: '5',
          type: '饮料',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '牛奶',
          num: '2',
          type: '蛋白质',
        }]
    }
  }

methods部分 - span-method方法,行合并的逻辑

methods: {
    // table合并列
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      let data = this.tableData; // 拿到当前table中的数据
      let cellValue = row[column.property]; // 获取当前位置的值
      let sortArr = ['name', 'type']; // 需要合并的字段(用于合并行的属性)
      if (cellValue && sortArr.includes(column.property)) {
        let prevRow = data[rowIndex - 1]; // 获取上一行的数据
        let nextRow = data[rowIndex + 1]; // 获取下一行的数据
        if (prevRow && prevRow[column.property] === cellValue) { // 当有上一行的数据,并且与当前值相等时
          return {rowspan: 0, colspan: 0}; // 返回一个对象,表示不需要合并单元格
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) { // 当有下一行的数据并且与当前值相等时,获取新的下一行数据
            nextRow = data[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return {rowspan: countRowspan, colspan: 1}; // 返回一个对象,表示需要合并行单元格
          }
        }
      }
    },
  }

http://www.niftyadmin.cn/n/5082408.html

相关文章

idea一些不太常用但是能提升编码效率的快捷键

Ctrl Shift V&#xff1a;从历史选择粘贴 从历史剪粘版中选择要粘贴的内容。Ctrl Shift Z&#xff1a;重做 恢复上一步撤销内容Shift F4&#xff1a;在新窗口中打开 比如要从另一个类中复制代码 可以把这个类在新窗口单独打开 用AltTab 来回切换复制Ctrl PageUp&#xff…

[JAVA版本] Websocket获取B站直播弹幕——基于直播开放平台

教程 B站直播间弹幕Websocket获取 — 哔哩哔哩直播开放平台 基于B站直播开放平台开放且未上架时&#xff0c;只能个人使用。 代码实现 1、相关依赖 fastjson2用于解析JSON字符串&#xff0c;可自行替换成别的框架。 hutool-core用于解压zip数据&#xff0c;可自行替换成别的…

RabbitMQ常见的交换机类型

RabbitMQ安装 pom.xml里导入相关的依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency> application.properties配置文件 spring.rabbitmq.hos…

从零开始探索C语言(十一)----共用体和位域

文章目录 1. 共用体1.1 定义共用体1.2 访问共用体成员 2. 位域2.1 位域声明2.2 位域的定义和位域变量的说明2.3 位域的使用2.4 位域小结 1. 共用体 共用体是一种特殊的数据类型&#xff0c;允许您在相同的内存位置存储不同的数据类型。您可以定义一个带有多成员的共用体&#…

如何处理前端动画和过渡效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

jdk都对,nacos启动失败

nacos启动失败&#xff0c;Nacos Server did not start because dumpservice bean construction failure : No DataSource set nacos无法启动&#xff0c;报Nacos Server did not start because dumpservice bean construction failure :No DataSource set。这个错误&#xff…

jwttoken+redis+springsecurity

思路 jwttoken不设置过期时间 redis管理过期时间&#xff0c;并且续签 redis中key"login:"userId, valuejwtUser 再次访问时&#xff0c;解析token中userId&#xff0c;并且根据过期时间自动续签JWT 实现登录认证 Token 自动续期方案 pom文件配置 <!--Redis--&…

虚拟环境和包

目录 12. 虚拟环境和包 12.1. 简介 12.2. 创建虚拟环境 12.3. 使用 pip 管理包 12. 虚拟环境和包 12.1. 简介 Python 应用程序经常会使用一些不属于标准库的包和模块。应用程序有时候需要某个特定版本的库&#xff0c;因为它需要一个特定的 bug 已得到修复的库或者它是使用…