vxe-table合并行数据

vxe-table合并行数据

在这里插入图片描述

      <vxe-table
        border
        resizable
        height="500"
        :scroll-y="{enabled: false}"
        :span-method="mergeRowMethod"
        :data="tableData3"
      >
        <vxe-column type="seq" width="60" />
        <vxe-column field="key" title="设备名称" />
        <vxe-column field="num" title="Num" />
        <vxe-column field="content" title="Translate" />
        <vxe-column field="language" title="Language">
          <template v-slot="{ row }">
            <div @click="getRow(row)">{{ row.language }}</div>
          </template>
        </vxe-column>
        <vxe-column field="key" title="操作">
          <template v-slot="{ row }">
            <div @click="getRow(row)">获取数据</div>
          </template>
        </vxe-column>
      </vxe-table>







    tableData3: []







    getDataList2() {
      this.tableData3 = [
        { id: 10001, key: 'app.label.name', num: 1, content: '名称', language: '1' },
        { id: 10002, key: 'app.label.name', num: 1, content: 'Name', language: '2' },
        { id: 10003, key: 'app.label.name', num: 1, content: '性别', language: '3' },
        { id: 10004, key: 'app.label.name', num: 1, content: 'Sex', language: '4' },
        { id: 10005, key: 'app.label.age', num: 3, content: '年龄', language: '5' },
        { id: 10006, key: 'app.label.age', num: 3, content: 'Age', language: '6' },
        { id: 10007, key: 'app.label.role', num: 4, content: '角色', language: '7' },
        { id: 10008, key: 'app.label.role', num: 4, content: 'Role', language: '8' },
        { id: 10009, key: 'app.label.address', num: 5, content: '地址', language: '9' },
        { id: 10010, key: 'app.label.address', num: 5, content: 'Address', language: '10' },
        { id: 10011, key: 'app.label.nickname', num: 6, content: '昵称', language: '11' },
        { id: 10012, key: 'app.label.nickname', num: 6, content: 'Nickname', language: '12' }
      ]
    },
    // 通用行合并函数(将相同多列数据合并为一行)
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      console.log(row, _rowIndex, column, visibleData)
      const fields = ['key', 'num']
      const cellValue = row[column.field]
      if (cellValue && fields.includes(column.field)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.field] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.field] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
    getRow(row) {
      console.log(row)
    },






本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/764399.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第52课-语音控制机器人

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第52课-语音控制机器人 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎…

springboot拦截器,ThreadLocal(每个线程的公共区域)

拦截器 配置信息&#xff08;拦截所有请求&#xff09; 其实这种可以作为springAOP作日志记录

PPT文件中,母版视图与修改权限的区别

在PPT&#xff08;PowerPoint&#xff09;制作过程中&#xff0c;母版视图和修改权限是两个重要的概念&#xff0c;它们各自在演示文稿的编辑、管理和分发中扮演着不同的角色。本文将从定义、功能、使用场景及区别等方面详细探讨PPT母版视图与修改权限的异同。 PPT母版视图 定…

Python requests模块

Python中的requests是第三方模块用于实现HTTP请求&#xff0c;该模块在实现 HTTP请求时要比Python语言内置的 urllib 模块简化很多&#xff0c;操作更加人性化。在 Windows系统下使用requests 模块时需要通过在命令行窗口中执行 pip install requests 代码进行安装。 import r…

激发工作激情,积分体系深度融合任务管理,个人和团队参与度全面提升,目标完成率提高

任务&#xff0c;是总部推动新媒体矩阵的重要方式&#xff0c;总部可以联动多个团队发布多个作品&#xff0c;最终为品牌造势引流&#xff0c;过去&#xff0c;任务功能仅止步于考核&#xff0c;现在&#xff0c;任务功能新增“积分奖励”环节&#xff0c;真正实现激励到人、有…

IGBT(功率半导体)器件选型和应用

01 IGBT简介 IGBT是一种重要的功率半导体器件&#xff0c;全称为Insulated Gate Bipolar Transistor&#xff0c;中文全名为绝缘栅双极晶体管&#xff0c;是由双极型三极管&#xff08;BJT&#xff09;和绝缘栅型场效应管&#xff08;MOS&#xff09;组成的功率半导体器件&…

Python入门 2024/7/1

目录 第一个程序hello world 数据类型 注释 变量 用type类型查看数据类型 ​编辑 数据类型转换 ​编辑 标识符 运算符 字符串的三种定义方式 字符串拼接 ​编辑​编辑 字符串格式化 第一个程序hello world 区分c和python c是printf python是print print("h…

PO模式简介

V1顺序型&#xff1a;不能批量运行 import unittest from selenium import webdriver from time import sleep driver webdriver.Edge()# driver.maximize_window() driver.implicitly_wait(30) # driver.get(r"https://demo5.tp-shop.cn/") # driver.find_element…

ROS2参数通信原理

执行ros2 service list 由于没有启动任何节点&#xff0c;因此查看服务器列表为空 执行ros2 run turtlesim turtlesim_node 启动服务节点 执行ros2 service list 将返回系统中当前活动的所有服务的列表: 执行 ros2 service call /turtlesim/list_parameters rcl_interfaces/…

证件照肤色不均匀怎么处理 证件照肤色调整最简单方式 证件照肤色很白符合要求吗 证件照制作软件免费下载

在我们的日常生活中&#xff0c;证件照扮演着至关重要的角色。它不仅是身份识别的关键&#xff0c;更是我们在各种正式场合展示自己形象的重要一环。那么今天我们就来聊聊关于证件照肤色不均匀怎么处理的问题及证件照肤色调整最简单方式。 一、证件照肤色不均匀怎么处理 对于…

面试官:你了解git cherry-pick吗

事情要从一次不规范的代码开发开始说起 背景故事 时间 2024年某个风平浪静的周五晚上 地点 中国&#xff0c;北京&#xff0c;西二旗&#xff0c;某互联网大厂会议室 人物 小杰&#xff0c;小A&#xff0c;小B&#xff0c;老K 对话 老K&#xff1a;昨天提交的代码被测试打回来…

数据结构——带环链表、循环队列问题

1.带环链表问题 1.1给定一个链表判断其是否带环 解决思路&#xff1a;利用快慢指针法&#xff0c;快指针一次走两步慢指针一次走一步&#xff0c;从链表起始位置遍历链表&#xff0c;如果链表带环&#xff0c;则快慢指针一定会在环中相遇&#xff0c;否则快指针先到达链表末尾…

OpenSSH Server 远程代码执行漏洞(CVE-2024-6387)(附代码)

OpenSSH Server 远程代码执行漏洞&#xff08;CVE-2024-6387&#xff09;&#xff08;附代码&#xff09; 前言影响范围验证脚本1.python2.C? 参考链接 前言 2024年7月1日&#xff0c;OpenSSH 官方发布安全通告&#xff0c;披露CVE-2024-6387 OpenSSH Server 远程代码执行漏洞…

【084】基于SpringBoot实现的家乡特色推荐系统

系统介绍 视频演示 点击查看演示视频 基于SpringBoot实现的家乡特色推荐系统主要采用SpringBootVue进行开发&#xff0c;系统整体分为管理员、用户两种角色&#xff0c;主要功能包括首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;文章分类管理&#xff0c;文章分…

鸿蒙开发Ability Kit(程序访问控制):【对所有应用开放】

对所有应用开放 在申请目标权限前&#xff0c;建议开发者先阅读[申请应用权限]&#xff0c;对权限的工作流程有基本了解后&#xff0c;再结合以下权限字段的具体说明&#xff0c;判断应用能否申请目标权限&#xff0c;提高开发效率。 说明&#xff1a; 权限级别为normal的权限…

Sharding-JDBC分库分表的基本使用

前言 传统的小型应用通常一个项目一个数据库&#xff0c;单表的数据量在百万以内&#xff0c;对于数据库的操作不会成为系统性能的瓶颈。但是对于互联网应用&#xff0c;单表的数据量动辄上千万、上亿&#xff0c;此时通过数据库优化、索引优化等手段&#xff0c;对数据库操作…

新手教学系列——【Python开发】不同系统更换pip源的方法

在使用Python进行开发时,你可能会发现使用pip安装包的速度较慢,尤其是在国内进行操作时。为了提高安装速度,我们可以将pip的默认源更换为国内的一些镜像源。本文将详细介绍如何在不同操作系统上进行这一操作,并给出常用的国内镜像源。 为什么要换源 pip默认使用的是官方的…

嵌入式Linux系统编程 — 6.2 signal和 sigaction信号处理函数

目录 1 信号如何处理 2 signal()函数 2.1 signal()函数介绍 2.2 示例程序 3 sigaction()函数 3.1 sigaction()函数介绍 3.2 示例程序 1 信号如何处理 信号通常是发送给对应的进程&#xff0c;当信号到达后&#xff0c; 该进程需要做出相应的处理措施&#xff0c;可以通…

IP地址与电商企业

网购作为我们现代生活不可或缺的部分&#xff0c;现如今电商企业蓬勃发展。 IP地址是网络世界中每一台设备的独特标识符&#xff0c;就像现实世界中每家每户的门牌号。对于电商企业而言&#xff0c;它在很多方面方面发挥着作用。 IP地址能够帮助电商企业精准地确定用户所在的地…

从理论到实践的指南:企业如何建立有效的EHS管理体系?

企业如何建立有效的EHS管理体系&#xff1f;对于任何企业&#xff0c;没有安全就谈不上稳定生产和经济效益&#xff0c;因此建立EHS管理体系是解决企业长期追求的建立安全管理长效机制的最有效手段。良好的体系运转&#xff0c;可以最大限度地减少事故发生。 这篇借着开头这个…