当前位置：首页 > news >正文

Vxe UI vue vxe-table 实现表格数据分组功能，不是使用树结构，直接数据分组

news 来源：原创 2025/7/14 18:34:31

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

代码

通过配置 row-group-config.groupFields 指定分组字段

在这里插入图片描述

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const gridOptions = reactive({rowGroupConfig: {groupFields: ['role']},columns: [{ field: 'name', title: 'Name', minWidth: 300, rowGroupNode: true },{ field: 'role', title: 'Role' },{ field: 'sex', title: 'Sex' },{ field: 'age', title: 'Age' },{ field: 'address', title: 'Address' }],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Woman', age: 28, date: '2025-02-01', address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Man', age: 22, date: '2025-01-01', address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Woman', age: 32, date: '2025-05-01', address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Man', age: 32, date: '2025-01-01', address: 'test abc' },{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Man', age: 30, date: '2025-01-01', address: 'Shanghai' },{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Man', age: 30, date: '2025-03-01', address: 'test abc' },{ id: 10007, name: 'Test7', role: 'Test', sex: 'Woman', age: 29, date: '2025-05-01', address: 'test abc' },{ id: 10008, name: 'Test8', role: 'PM', sex: 'Woman', age: 35, date: '2025-11-01', address: 'test abc' },{ id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 21, date: '2025-05-01', address: 'test abc' },{ id: 10010, name: 'Test10', role: 'PM', sex: 'Woman', age: 28, date: '2025-03-01', address: 'test abc' },{ id: 10011, name: 'Test11', role: 'Test', sex: 'Woman', age: 29, date: '2025-03-01', address: 'test abc' },{ id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 37, date: '2025-10-01', address: 'test abc' },{ id: 10013, name: 'Test13', role: 'Test', sex: 'Woman', age: 24, date: '2025-02-01', address: 'test abc' },{ id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, date: '2025-08-01', address: 'test abc' },{ id: 10015, name: 'Test15', role: 'Designer', sex: 'Man', age: 21, date: '2025-05-01', address: 'test abc' },{ id: 10016, name: 'Test16', role: 'Designer', sex: 'Woman', age: 21, date: '2025-10-01', address: 'test abc' },{ id: 10017, name: 'Test17', role: 'Test', sex: 'Man', age: 31, date: '2025-12-01', address: 'test abc' },{ id: 10018, name: 'Test18', role: 'Develop', sex: 'Woman', age: 32, date: '2025-10-01', address: 'test abc' },{ id: 10019, name: 'Test19', role: 'Test', sex: 'Man', age: 37, date: '2025-02-01', address: 'test abc' },{ id: 10020, name: 'Test20', role: 'Develop', sex: 'Man', age: 41, date: '2025-03-01', address: 'test abc' }]
})
</script>

https://gitee.com/x-extends/vxe-table

Vxe UI vue vxe-table 实现表格数据分组功能，不是使用树结构，直接数据分组

Vxe UI vue vxe-table 实现表格数据分组功能，不是使用树结构，直接数据分组查看官网：https://vxetable.cn gitbub：https://github.com/x-extends/vxe-table gitee：https://gitee.com/x-extends/vxe-table 代码通过…...

编程日记 2025/7/14 18:34:31

基于TI AM6442+FPGA解决方案，支持6网口，4路CAN，8个串口

TI AM6442FPGA解决方案具有以下技术优势及适用领域： 一、技术优势 ‌异构多核架构‌：AM6442处理器集成7个内核（2xCortex-A534xCortex-R5F1xCortex-M4F），可实现应用处理、实时控制和独立任务分核协同，满足…...

编程日记 2025/7/14 14:24:27

6. 多列布局/用户界面 - 杂志风格文章布局

6. 多列布局/用户界面 - 杂志风格文章布局案例：多栏杂志排版 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><style type"text/css">body {font-family: "…...

编程日记 2025/6/29 8:40:29

计算机系统----软考中级软件设计师（自用学习笔记）

目录 1、计算机的基本硬件系统 2、CPU的功能 3、运算器的组成 4、控制器 5、计算机的基本单位 6、进制转换问题 7、原码、反码、补码、移码 8、浮点数 9、寻址方式 10、奇偶校验码 11、海明码 12、循环冗余校验码 13、RISC和CISC 14、指令的处理方式 15、存储器…...

编程日记 2025/7/8 0:36:27

FPGA图像处理（六）------ 图像腐蚀and图像膨胀

默认迭代次数为1，只进行一次腐蚀、膨胀一、图像腐蚀 1.相关定义 2.图像腐蚀效果图 3.fpga实现彩色图像灰度化，灰度图像二值化，图像缓存生成滤波模块（3*3），图像腐蚀算法 timescale 1ns / 1ps // // Des…...

编程日记 2025/6/29 8:38:45

2025年RIS SCI2区，改进白鲸优化算法+复杂非线性方程组求解，深度解析+性能实测

目录 1.摘要2.白鲸优化算法BWO原理3.改进策略4.结果展示5.参考文献6.代码获取7.读者交流 1.摘要本文提出了一种改进白鲸优化算法（ABWOA）用来解决非线性方程组（SNLEs）求解问题。ABWOA引入了平衡因子和非线性自适应参数&#xff0…...

编程日记 2025/6/29 8:52:02

【论信息系统项目的资源管理】

论信息系统项目的资源管理前言一、规划好资源管理，为保证项目完成做好人员规划二、估算活动资源，为制订项目进度计划提供资源需求三、获取项目资源，组建一个完备的项目团队四、建设项目团队，提高工作能力，促进团队成员…...

编程日记 2025/6/29 8:34:39

开发与AI融合的Windsurf编辑器

Windsurf编辑器是开发人员和人工智能真正融合在一起的地方，提供了一种感觉像文字魔术的编码体验。手册：Windsurf - Getting Started 下载链接：Download Windsurf Editor for Windows | Windsurf (formerly Codeium) 下载安装从上面的下载…...

编程日记 2025/6/29 8:23:45

maven工程跳过@SpringTest

每次跑springboot都比较费劲，会自动测试所有的SpringBootTest的类，这里对根pom添加这个插件，即可跳过测试，实测节省时间2分钟以上 <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>ma…...

编程日记 2025/6/29 8:50:29

算法竞赛相关 Java 二分模版

目录找和目标值相关方法 Arrays.binarySearch(); 二分答案模版找和目标值相关 public class BinarySearchTemplate {// 查找大于 x 的最小值（即严格上界）public static int upperBound(int[] arr, int x) {int left 0, right arr.length;while (…...

编程日记 2025/6/29 8:23:41

如何使用远程桌面控制电脑

目的： 通过路由器使用pc控制台式机，实现了有线/无线pc与台式机的双向远程桌面控制最核心就两条：get ip地址与被控制机器的账户与密码。现象挺神奇：被控制电脑的电脑桌面处于休眠模式，此时强行唤醒被控电脑会导致中断…...

编程日记 2025/6/29 8:38:42

运行Spark程序-在shell中运行1

（一）分布式计算要处理的问题【老师提问：分布式计算要面临什么问题？】【老师总结】分布式计算需要做到： 1.分区控制。把大的数据拆成一小份一小份的（分区，分片）让多台设备同时计算…...

编程日记 2025/6/29 8:40:39

多边形,矩形,长方体设置

在cesium中,我们可以通过既有的库来进行对地图的构建 // 向场景中添加一个几何体（立方体） scene.primitives.add(new Cesium.Primitive({// 定义几何体实例geometryInstances: new Cesium.GeometryInstance({// 使用BoxGeometry.fromDimensions方法创建…...

编程日记 2025/6/29 8:44:17

3.3 阶数的作用

第一步：引入背景与动机在数学中，特别是在使用泰勒公式进行函数近似时，阶数的选择对结果的精度和适用范围有着重要影响。阶数越高，近似的精度通常也越高，但计算复杂度也会增加。因此，理解不同阶数的作用及…...

编程日记 2025/6/29 8:32:04

OAuth安全架构深度剖析：协议机制与攻防实践

目录一、OAuth协议核心架构解析 1. 协议框架与核心组件 2. 授权流程类型对比二、OAuth安全漏洞技术原理与攻击向量 1. 重定向URI劫持攻击 2. 令牌注入与滥用 3. 跨站请求伪造（CSRF） 三、纵深防御体系构建指南 1. 协议层加固 2. 工程化防护 3…...

编程日记 2025/6/29 8:48:19

关于网站提交搜索引擎

发布于Eucalyptus-blog 一、前言将网站提交给搜索引擎是为了让搜索引擎更早地了解、索引和显示您的网站内容。以下是一些提交网站给搜索引擎的理由： 提高可见性：通过将您的网站提交给搜索引擎，可以提高您的网站在搜索结果中出现的机会。当用…...

编程日记 2025/7/9 17:18:48

一文理清人工智能，机器学习，深度学习的概念

目录一、人工智能的起源与核心范畴（1950-1980） 1.1 智能机器的最初构想 1.2 核心范畴的初步分化二、机器学习的兴起与技术分化（1980-2010） 2.1 统计学习的黄金时代 2.2 神经网络的复兴与子集定位 2.3 技术生态的形成与AI…...

编程日记 2025/6/29 8:40:47

MySQL 数据库：创建新数据库和数据表全攻略

MySQL 数据库：创建新数据库和数据表全攻略在 MySQL 数据库管理中，创建新的数据库和数据表是基础且关键的操作。无论是开发新的应用程序，还是对现有数据进行整理和存储，都离不开这些操作。本文将详细介绍如何在 MySQL 中创建新数…...

编程日记 2025/6/29 5:07:59

React Native 与 Expo

🧩 Expo 和 React Native 的关系项目定义React Native一个由 Meta（Facebook）开发的原生移动端开发框架，使用 JavaScript React 来构建 iOS 和 Android 应用Expo一个构建在 React Native 之上的开发工具链，封装了很多…...

编程日记 2025/6/29 1:33:51

【RabbitMQ】七种工作模式介绍

文章目录 1. 简单模式2. 工作队列模式3. 发布订阅模式交换机类型 Publish/Subscribe 模式 4. Routing（路由模式）5. Topics（通配符模式）6. RPC（RPC 通信）7. Publisher Confirms（发布确认&#xf…...

编程日记 2025/7/13 15:41:53

【C++进阶篇】二叉搜索树的实现（赋源码）

掌握二叉搜索树：从基础知识到实际应用的全貌一. 二叉搜索树简介1.1 基本概念1.2 意义与价值1.3 典型应用场景1.4 性能分析1.5 总结与展望二. 搜索二叉树实现2.1 插入2.2 查找2.3 删除2.3.1 单或无孩型2.3.2 双孩型2.3.4 整合代码三. ⼆叉搜索树key和key/value使⽤…...

编程日记 2025/6/29 8:50:54

huggingface 下载不了模型问题？ from modelscope.hub.snapshot_download import snapshot_download model_dir snapshot_download(damo/nlp_xlmr_named-entity-recognition_viet- ecommerce-title, cache_dirpath/to/local/dir, revisionv1.0.1) 方法一&#xff1…...

编程日记 2025/7/8 18:01:27

2025年金融创新、区块链与信息技术国际会议（FRCIT 2025 2025）

2025 International Conference on Financial Innovation, Regional Chains, and Information Technology （一）会议信息会议简称：FRCIT 2025 大会地点：中国郑州收录检索：提交Ei Compendex,CPCI,CNKI,Google Schola…...

编程日记 2025/6/29 8:50:48

rtty操作记录说明

rtty操作记录说明前言整理资料发现了几年前做的操作记录，分享出来，希望对大家有用。 rtty-master：rtty客户端程序，其中buffer\log\ssl为源码的子目录，从git上下载https://github.com/zhaojh329， rtty…...

编程日记 2025/7/11 0:30:26

股指期货是什么？有啥特点？怎么用？

股指期货，英文简称SPIF，全称是股票价格指数期货，也叫股价指数期货、期指。简单来说，它就是以股价指数为“赌注”的一种期货合约。想象一下，你和朋友打了个赌，约定在未来的某个日子，按照事先说好…...

编程日记 2025/6/29 5:07:33

提示词设计模板（基于最佳实践）

1. 任务清晰化模糊指令 ➜ 明确指令 ❌ "写一篇关于环保的文章" ✅ *"列出5种城市环保措施，并分别说明其对减少碳排放的影响（要求：数据支持案例）"* 2. 任务步骤化案例：策划线上营销活动 1.…...

编程日记 2025/6/29 8:23:29

涌现理论：连接万物的神秘力量

一、理论起源与概述现象引介：通过蜂群“风浪”（蜜蜂抖动翅膀呈波浪式扩散）、鱿鱼变色捕猎等生物现象，引出涌现理论。理论定义：涌现理论可有效介入复杂问题，解释事物起源，适用于物理、化学、生…...

编程日记 2025/7/9 17:06:55

9.9 Ollama私有化部署Mistral 7B全指南：命令行交互到API集成全流程解析

Ollama私有化部署Mistral 7B全指南：命令行交互到API集成全流程解析关键词：Ollama 私有化部署, Mistral 7B 运行, 本地大模型管理, 命令行交互, REST API 集成一、Mistral 7B 模型特性解析 Mistral 7B 是由 Mistral AI 团队开发的高性能开源大语言模型，在同等参数量级模型…...

编程日记 2025/6/29 8:34:08

【Redis 进阶】缓存

思维导图： 1. 缓存的基本概念 1.1 缓存的实例化解释以火车站刷身份证为例，身份证存放在皮箱中虽安全，但取用不便；而将其置于衣袋，则显著提高了访问效率。这一过程恰似计算机系统中缓存的运作机制——将常用数据暂存于…...

编程日记 2025/7/8 3:05:12

游戏资源传输服务器

目录项目简介项目实现nginx配置服务器逻辑图项目代码简介reactor 模型部分文件传输部分项目演示视频演示演示分析项目简介使用C开发，其中资源存储在fastdfs 中，用户通过http上传或下载资源文件，此项目需要开启nginx中的nginx-upload-mod…...

编程日记 2025/6/29 8:28:43

dockerdesktop 重新安装

1、卸载 dockerdesktop 卸载时，最后一步删除镜像文件会卡住取消 2、在资源管理器中将镜像文件路径改名如：e:\docker 修改 e:\docker1 3、重新安装wsl wsl --shutdown 以管理员身份运行hy.bat pushd "%~dp0" dir /b %SystemRoot%\servic…...

编程日记 2025/7/9 13:44:59

免费实用的远程办公方案

假如你需要快速检索出远程电脑文件并下载？ 假如你需要访问远程电脑的共享文件夹？ 假如你需要访问远程电脑的USB设备，例如软件加密狗、调试器、固件烧录器、U盘等？ 本篇文章能够解决以上痛点。这个方案非常实用，也很…...

编程日记 2025/7/2 14:12:22

论文知识总结

参考1 一 Intelligent reflecting surface (IRS)跟RIS区别是什么 Intelligent Reflecting Surface (IRS) 和 Reconfigurable Intelligent Surface (RIS) 在很多情况下所指相同或相近，常被视为同一类技术的不同表述，但在一些特定语境下也有细微区别&…...

编程日记 2025/6/29 8:35:48

WebGIS 开发黑科技：解锁地理信息的新视界

你能想象吗？在我们生活的这个广袤星球上，每一处角落的地理信息，竟能通过网页，以超乎想象的方式呈现在眼前。WebGIS，这个看似神秘的词汇，实则是当下地理信息领域的 “黑科技”。它究竟有何神奇魔力&#xff…...

编程日记 2025/6/29 8:30:18

Postman启动时检测到版本不匹配错误

Postman启动时检测到版本不匹配错误，提示：Version mismatch detected. Looks like youve used a newer version of the Postman app on this system. 找到 C:\Users\AppData\Local\Postman C:\Users\AppData\Roaming\Postman 并删除现有的 postman 文件夹…...

编程日记 2025/6/29 8:29:18

Java Spring MVC -01

SpringMVC 是一种基于的实现 MVC 设计模式的请求驱动类型的轻量级 Web 框架，属于 Spring FrameWork 的后续产品，已经融合在 Spring Web Flow 中。 First:SpringMVC-01-SpringMVC 概述 SpringMVC 是 Spring 框架的一个模块，用于构建 Web 应…...

编程日记 2025/6/29 8:50:30

遨游5G-A防爆手机：赋能工业通信更快、更安全

在工业数字化转型与5G-A商用进程加速的双重驱动下，中国防爆手机市场正迎来历史性发展机遇。作为“危、急、特”场景通信解决方案服务商，遨游通讯深刻洞察到：当5G-A网络以超高速率、海量连接和毫秒级时延重塑行业生态时，防爆手机这…...

编程日记 2025/7/4 3:48:55

MySQL 8.0 OCP 1Z0-908 51-60题

Q51.Examine this parameter setting: audit_logFORCE_LOG_PERMAENT What effect does this have on auditing? A)It will force the load of the audit plugin even in case of errors at server start.//插件在之前就必须加载完成，只有当插件之前通过 INSTALL PL…...

编程日记 2025/6/29 8:28:35

javax.servlet.Filter 介绍-笔记

1.javax.servlet.Filter 简介 javax.servlet.Filter 是 Java Servlet API 中的一个核心接口，用于在请求到达目标资源（如 Servlet 或 JSP）之前或响应返回给客户端之前执行预处理或后处理操作。它常用于实现与业务逻辑无关的通用功能&#xff…...

编程日记 2025/6/29 8:42:12

【2025年前端高频场景题系列】使用同一个链接，如何实现PC打开是web应用、手机打是-个H5 应用？

面试情境与问题引入哈喽大家伙，我是布鲁伊。在前端开发面试中，面试官经常会抛出一些看似简单却能考察多方面能力的问题。"如何实现同一个链接在PC端和移动端展示不同应用？"就是这样一个典型问题。为什么面试官喜欢问这个问题？因为它能同时考察候选人的设备适配…...

编程日记 2025/6/29 8:51:35

GPT 经验

GPT 经验篇一、gpt源码past_key_value是干啥的？二、gpt onebyone 每一层怎么输入输出？三、bert和gpt有什么区别四、文本生成的几大预训练任务？五、讲讲T5和Bart的区别，讲讲bart的DAE任务？六、讲讲Bart和Bert的区别&am…...

编程日记 2025/6/29 8:36:34

uniapp｜实现获取手机摄像头权限，调用相机拍照实现人脸识别相似度对比，拍照保存至相册，多端兼容(APP/微信小程序)

基于uniapp以及微信小程序实现移动端人脸识别相似度对比，实现摄像头、相册权限获取、相机模块交互、第三方识别集成等功能，附完整代码。目录核心功能实现流程摄像头与相册权限申请权限拒绝后的引导策略摄像头调用拍照事件处理人脸识别集成图片预处理（Base64编码/压缩）调用…...

编程日记 2025/6/29 8:23:43

蓝桥杯13届国B 出差

题目描述 A、B、C、D四个人中要派两个人出差，按下述三个条件有几种安排方案，如何安排。 (1) 若A去，则C和D中要去一人。 (2) B和C不能都去。 (3) C去则D要留下。输入描述本题无输入。输出描述按字典序输出所有符合要求的安排方案&…...

编程日记 2025/6/29 5:07:31

论软件设计模式及其应用

三、正文摘要 2023年 3 月，我所在的公司承接了某油企智慧加油站平台的建设工作。该项目旨在帮助加油站提升运营效率、降低运营成本和提高销售额。我在该项目中担任系统架构设计师，负责整个系统的架构设计工作。本文以该项目为例，详细论述了…...

编程日记 2025/6/29 8:39:50

实现 STM32 PWM 输出：原理、配置与应用详解

实现 STM32 PWM 输出：原理、配置与应用详解在嵌入式开发领域，STM32 微控制器凭借其强大的功能和丰富的外设资源，被广泛应用。PWM（脉冲宽度调制）作为 STM32 的重要功能之一，对于电机调速、LED 调光、信号合…...

编程日记 2025/6/29 8:50:50

优艾智合机器人助力半导体智造，领跑国产化替代浪潮

在全球半导体产业加速自动化转型的背景下，传统物流已成为制约智能化升级的关键瓶颈。作为中国移动机器人行业的领军企业，优艾智合（YOUIBOT）自2017年起就敏锐洞察到"半导体设备国产化"的紧迫需求，依托在工业移…...

编程日记 2025/7/9 7:38:13

Pytorch张量和损失函数

文章目录张量张量类型张量例子使用概率分布创建张量正态分布创建张量 (torch.normal)正态分布创建张量示例标准正态分布创建张量标准正态分布创建张量示例均匀分布创建张量均匀分布创建张量示例激活函数常见激活函数损失函数(Pytorch API)L1范数损失函数均方误差损失函数交叉…...

编程日记 2025/6/29 8:46:00

【RabbitMQ】工作队列和发布/订阅模式的具体实现

文章目录建立连接工作队列模式实现创建队列和交换机生产者代码消费者代码运行程序启动消费者启动生产者发布/订阅模式实现创建队列和交换机生产者代码创建交换机声明两个队列绑定队列和交换机发送消息完整代码消费者代码完整代码运行程序启动生产者启动消费者建立连接我…...

编程日记 2025/6/29 1:34:05

loki grafana 页面查看 loki 日志偶发 too many outstanding requests

问题描述 grafana 页面查看 loki 日志偶然出现 too many outstanding requests loki pod 日志报错 levelerror ts2025-05-13T06:15:52.509738812Z callerscheduler_processor.go:158 org_idfake traceID1570d49e6d15b25c msg"error notifying scheduler about finished …...

编程日记 2025/6/29 8:43:44

Python之with语句

文章目录 Python中的with语句详解一、基本语法二、工作原理三、文件操作中的with语句1. 基本用法2. 同时打开多个文件四、with语句的优势五、自定义上下文管理器1. 基于类的实现2. 使用contextlib模块六、常见应用场景七、注意事项 Python中的with语句详解 with语句是Python…...

编程日记 2025/6/29 8:26:25

代码

相关文章：