vxe-grid 通过配置式给单元格字段格式化树结构数据,转换树结构节点
vxe-grid 通过配置式给单元格字段格式化树结构数据,转换树结构节点
比如用户自定义配置好的数据源,通过在列中配置好数据,全 json 方式直接返回给前端渲染,不需要写任何格式化方法。
官网:https://vxetable.cn
npm install vxe-pc-ui@4.3.90 vxe-table@4.11.3
// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...
效果

配置参数: { name: ‘formatTree’, options: [], optionProps: { label: ‘label’, value: ‘value’ } }
<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const gridOptions = reactive({border: true,showOverflow: true,columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name', minWidth: 200 },{field: 'city',title: 'City',width: 300,cellRender: {name: 'formatTree',options: [{label: '广东省',value: '1',children: [{ label: '深圳市', value: '1-1' },{ label: '广州市', value: '1-2' }]},{label: '北京',value: '2',children: [{ label: '东城区', value: '2-1' },{ label: '西城区', value: '2-2' }]}]}}],data: [{ id: 10001, name: 'Test1', role: 'Develop', city: null },{ id: 10002, name: 'Test2', role: 'Test', city: '1-2' },{ id: 10003, name: 'Test3', role: 'PM', city: '1-1' },{ id: 10003, name: 'Test4', role: 'Develop', city: ['1-1', '2-1'] }]
})
</script>
https://gitee.com/x-extends/vxe-table
相关文章:
vxe-grid 通过配置式给单元格字段格式化树结构数据,转换树结构节点
vxe-grid 通过配置式给单元格字段格式化树结构数据,转换树结构节点 比如用户自定义配置好的数据源,通过在列中配置好数据,全 json 方式直接返回给前端渲染,不需要写任何格式化方法。 官网:https://vxetable.cn npm i…...
大厂算法面试常见问题总结:高频考点与备战指南
在大厂算法面试中,数据结构与算法是必考的核心内容。 无论是校招还是社招,算法题的表现往往决定了面试的成败。 为了帮助大家更好地备战,本文总结了大厂算法面试中的高频考点,并提供了详细的备战建议,助你轻松应对面…...
制造行业CRM选哪家?中大型企业CRM选型方案
在当今竞争激烈的制造行业中,企业对于客户关系管理(CRM)系统的需求日益增强,高效、智能的CRM系统已成为推动企业业务增长、优化客户体验的关键。在制造业 CRM 市场中,纷享销客和销售易都备受关注,且各自有着…...
PHP集成软件用哪个比较好?
在Windows环境下,使用PHP时,通常需要一个集成开发环境(IDE)或者集成软件来简化开发和调试过程。以下是几款常用且推荐的PHP集成软件,每款都有其特点,可以根据需求进行选择: 1. XAMPP 特点&…...
当pcie设备变化时centos是否会修改网络设备的名称(AI回答)
当pcie设备变化时centos是否会修改网络设备的名称 在CentOS(以及其他基于Linux的操作系统)中,网络接口的命名通常遵循特定的规则,尤其是在使用PCIe设备(如网络适配器)时。网络接口的命名通常基于设备的物理…...
Mac arm架构使用 Yarn 全局安装 Vue CLI
dgqdgqdeMacBook-Pro spid-admin % vue --version zsh: command not found: vue要使用 Yarn 安装 Vue CLI,你可以执行以下命令: yarn global add vue/cli这个命令会全局安装 Vue CLI,让你可以使用 vue 命令创建、管理 Vue.js 项目。以下是一…...
【Python游戏】双人简单对战游戏
以下是一个使用 Python 的 pygame 库实现的简单对战游戏示例,游戏中玩家可以控制两个角色进行对战,并且支持自定义图片(最好使用无底色的png图片)。完整源码以及实现思路: import pygame import os# 初始化 Pygame pygame.init()# 设置游戏窗…...
Windows11切换回Windows10风格右键菜单
参考文章:Win11新版右键菜单用不惯?一键切换回Win10经典版!-CSDN博客 以管理员权限运行命令行cmd 切换为经典旧版右键菜单,执行 reg.exe add “HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServe…...
怎么学习调试ISP的参数
摄像头的 **Sensor 获取的 RAW 数据** 是未经处理的原始图像数据,通常需要经过 **ISP(Image Signal Processor,图像信号处理器)** 的处理,才能生成可用的图像或视频。ISP 的作用是对 RAW 数据进行一系列图像处理操作&a…...
“三次握手”与“四次挥手”:TCP传输控制协议连接过程
目录 什么是TCP协议 “三次握手”建立连接 “四次挥手”断开连接 “三次握手”和“四次挥手”的反思 总结 什么是TCP协议 想象一下,你和远方的朋友要进行一场电话交流,但这通电话不仅仅是随便聊聊,而是要传递一封重要的信件。为了确保这…...
OpenCV形态学操作
1.1. 形态学操作介绍 初识: 形态学操作是一种基于图像形状的处理方法,主要用于分析和处理图像中的几何结构。其核心是通过结构元素(卷积核)对图像进行扫描和操作,从而改变图像的形状和特征。例如: 腐蚀&…...
深入理解WebSocket接口:如何使用C++实现行情接口
在现代网络应用中,实时数据传输变得越来越重要。通过WebSocket,我们可以建立一个持久连接,让服务器和客户端之间进行双向通信。这种技术不仅可以提供更快的响应速度,还可以减少不必要的网络流量。本文将详细介绍如何使用C来实现We…...
汇能感知的光谱相机/模块产品有哪些?
CM020A 分辨率:1600H1200V 光谱范围:350~950nm 光谱分辨率:1nm 接口:USB2.0 帧率:16001200 (6帧) 输出格式:Raw 8bit FOV:D73.5H58.8V44.1 相机尺寸:505055mm VM02S10 分辨率…...
抓包工具是什么?
抓包工具是一种用于捕获和分析网络数据包的软件或硬件设备。它可以帮助用户监控网络通信过程,查看网络中传输的数据内容、协议类型、源地址、目的地址等信息。以下是关于抓包工具的一些详细解释: 1. 主要功能 捕获数据包:抓包工具能够实时捕…...
Kubernetes的Ingress 资源是什么?
在Kubernetes中,Ingress资源是一种用于管理集群外部对内部服务访问的API对象,主要用于将不同的外部请求路由到集群内的不同服务,以下是关于它的详细介绍: 定义与作用 Ingress资源定义了从集群外部到内部服务的HTTP和HTTPS路由规…...
【操作幂等和数据一致性】保障业务在MySQL和COS对象存储的一致
业务场景 发布信息,更新到数据库MySQLCOS操作,更新JSON文件 不过可能存在幂等性和数据一致性的问题。 // 批量存MySQL entityPublishService.saveOrUpdateBatch(entityPublishList); // 遍历批量存COS对象存储searchEntitys.forEach(req -> {//删除…...
DevOps自动化部署详解:从理念到实践
在软件开发日益快速迭代的今天,如何以高效、稳定且可重复的方式将代码变更从开发环境自动部署到生产环境成为企业竞争的重要因素。DevOps 正是在这一背景下应运而生,它打破开发、测试、运维之间的壁垒,通过自动化工具和流程,实现持…...
LeetCodehot 力扣热题100
class Solution { public:int max_sum INT_MIN; // 初始化为最小值,确保能够处理所有可能的路径和int maxPathSum(TreeNode* root) {dfs(root);return max_sum;}int dfs(TreeNode* root) {if (root nullptr) return 0; // 如果是空节点,返回0// 递归…...
解锁 AIoT 无限可能,乐鑫邀您共赴 Embedded World 2025
2025 年 3 月 11-13 日,全球规模最大的嵌入式展览会——Embedded World 2025 将在德国纽伦堡盛大开幕。作为物联网和嵌入式技术领域的领先企业,乐鑫信息科技 (688018.SH) 将展示在 AI LLM、HMI、双频 Wi-Fi 6、低功耗 MCU 和 Matter 等领域的最新技术及解…...
C# 背景 透明 抗锯齿 (效果完美)
主要是通过 P/Invoke 技术调用 Windows API 函数 gdi32.dll/user32.dll,同时定义了一些结构体来配合这些 API 函数的使用,常用于处理图形绘制、窗口显示等操作。 运行查看效果 局部放大,抗锯齿效果很不错,尾巴毛毛清晰可见。 using System; u…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
接口自动化测试:HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具,支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议,涵盖接口测试、性能测试、数字体验监测等测试类型…...
windows系统MySQL安装文档
概览:本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容,为学习者提供全面的操作指导。关键要点包括: 解压 :下载完成后解压压缩包,得到MySQL 8.…...
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中,合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式:工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
ThreadLocal 源码
ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物,因为每个访问一个线程局部变量的线程(通过其 get 或 set 方法)都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段,这些类希望将…...
