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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

延迟任务的11种实现方式(下)!!

接上文&#xff1a; Redisson的RDelayedQueue Redisson他是Redis的儿子&#xff08;Redis son&#xff09;&#xff0c;基于Redis实现了非常多的功能&#xff0c;其中最常使用的就是Redis分布式锁的实现&#xff0c;但是除了实现Redis分布式锁之外&#xff0c;它还实现了延迟…

BS5852英国家具防火安全条款主要包括哪几个方面呢?

什么是BS5852检测&#xff1f; BS5852是英国针对家用家具的强制性安全要求&#xff0c;主要测试家具在受到燃烧香烟和火柴等火源时的可燃性。这个标准通常分为四个部分进行测试&#xff0c;但实际应用中主要测试第一部分和第二部分&#xff0c;包括烟头测试和利用乙炔火焰模拟…

如何使用Spark SQL进行复杂的数据查询和分析

使用Spark SQL进行复杂的数据查询和分析是一个涉及多个步骤和技术的过程。以下是如何使用Spark SQL进行复杂数据查询和分析的详细指南&#xff1a; 一、准备阶段 环境搭建&#xff1a; 确保已经安装并配置好了Apache Spark环境。准备好数据源&#xff0c;可以是CSV文件、JSON…

iOS事件传递和响应

背景 对于身处中小公司且业务不怎么复杂的程序员来说&#xff0c;很多技术不常用&#xff0c;你可能看过很多遍也都大致了解&#xff0c;但是实际让你讲&#xff0c;不一定讲的清楚。你可能说&#xff0c;我以独当一面&#xff0c;应对自如了&#xff0c;但是技术的知识甚多&a…

FFmpeg 源码编译安装

参考&#xff1a; https://trac.ffmpeg.org/wiki/CompilationGuide/Ubuntu Linux (Ubuntu) 下载 FFmpeg 源码&#xff0c;并将其解压&#xff0c;这里我将它放在 ~/ffmpeg_source 目录下&#xff1b; cd ~/ffmpeg_sources wget -O ffmpeg-snapshot.tar.bz2 https://ffmpeg.org…

【pytest】编写自动化测试用例命名规范README

API_autoTest 项目介绍 1. pytest命名规范 测试文件&#xff1a; 文件名需要以 test_ 开头或者以 _test.py 结尾。例如&#xff0c;test_login.py、user_management_test.py 这样的命名方式&#xff0c;pytest 能够自动识别并将其作为测试文件来执行其中的测试用例。 测试类…

Windows桌面系统管理5:Windows 10操作系统注册表

Windows桌面系统管理0&#xff1a;总目录-CSDN博客 Windows桌面系统管理1&#xff1a;计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2&#xff1a;VMware Workstation使用和管理-CSDN博客 Windows桌面系统管理3&#xff1a;Windows 10操作系统部署与使用-CSDN博客 Wi…

llama.cpp将sensor格式的大模型转化为gguf格式

前言 ollama本地只能导入gguf格式的大模型文件&#xff0c;将safetensors 文件转化为gguf格式。需要使用 llama.cpp 这个开源工具。以下是使用 llama.cpp 转换 .safetensors 格式模型到 .gguf 格式的详细步骤: 1. 首先克隆并编译 llama.cpp: 克隆项目 git clone https://gi…

【运维】源码编译安装cmake

背景&#xff1a; 已经在本地源码编译安装gcc/g&#xff0c;现在源码安装cmake 下载源码 下载地址&#xff1a;CMake - Upgrade Your Software Build System 安装步骤&#xff1a; ./bootstrap --prefix/usr/local/cmake make make install 错误处理 1、提示找不到libmpc.…

如何通过AI优化敏捷开发中的任务管理与分配?

用ChatGPT做软件测试 在现代软件开发中&#xff0c;敏捷开发&#xff08;Agile&#xff09;已成为一种广泛采用的开发方法论&#xff0c;其核心思想是强调快速响应变化、与客户的持续沟通以及团队协作的高效性。然而&#xff0c;随着项目规模的不断扩大&#xff0c;敏捷开发面临…

petalinux高版本设置自动登录和开机自启动配置

petalinux-config -c rootfs 依次选择 Image Features -> serial-autologin-root 这是配置 进来就是root权限 创建并安装名为 myapp-init 的新建应用程序 petalinux-create -t apps --template install -n myapp-init --enable 编辑 project-spec/meta-user/recipes-…

STM32 USB 设备的描述信息作用

在使用 STM32 USB 功能时 usbd_desc.c 文件中定义了一段宏&#xff0c;以下解每段宏的用途。 #define USBD_VID 1155 #define USBD_LANGID_STRING 1033 #define USBD_MANUFACTURER_STRING "STMicroelectronics" #define US…

React通用登录/注销功能实现方案(基于shadcn/ui)

React通用登录/注销功能实现方案&#xff08;基于shadcn/ui&#xff09; 一、功能需求分析二、通用功能封装1. 通用登录表单组件2. 认证Hook封装 三、功能使用示例1. 登录页面实现2. 用户菜单实现 四、路由保护实现五、方案优势 一、功能需求分析 需要实现以下核心功能&#x…

jEasyUI 创建学校课程表

jEasyUI 创建学校课程表 引言 随着信息技术的飞速发展,教育行业也迎来了数字化转型的浪潮。学校课程表的创建和管理作为教育信息化的重要组成部分,其效率和准确性直接影响到学校的教学秩序。jEasyUI,作为一款优秀的开源UI框架,凭借其易用性、灵活性和丰富的组件,成为了许…

Linux 内核中的 container_of 宏:以 ipoib_rx_poll_rss 函数为例

在 Linux 内核编程中,container_of 是一个非常实用的宏,主要用于通过结构体的成员指针来获取包含该成员的整个结构体的指针。rx_ring = container_of(napi, struct ipoib_recv_ring, napi); 在代码中就是利用了这个宏,下面我们详细分析它的作用和工作原理。 背景知识 在内…

【论文学习】RVS-FDSC:一种基于四方向条带卷积的视网膜血管分割方法以增强特征提取

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言论文论文内容RSC模块MSPF2 模块RPDA模块 实验效果 总结互动致谢参考往期回顾 前言…

蓝桥杯篇---IAP15F2K61S2矩阵键盘

文章目录 前言简介矩阵键盘的工作原理1.行扫描2.检测列状态3.按键识别 硬件连接1.行线2.列线 矩阵键盘使用步骤1.初始化IO口2.扫描键盘3.消抖处理4.按键识别 示例代码&#xff1a;4x4矩阵键盘扫描示例代码&#xff1a;优化后的矩阵键盘扫描注意事项1.消抖处理2.扫描频率3.IO口配…

【ISO 14229-1:2023 UDS诊断(ECU复位0x11服务)测试用例CAPL代码全解析⑲】

ISO 14229-1:2023 UDS诊断【ECU复位0x11服务】_TestCase19 作者&#xff1a;车端域控测试工程师 更新日期&#xff1a;2025年02月19日 关键词&#xff1a;UDS诊断协议、ECU复位服务、0x11服务、ISO 14229-1:2023 TC11-019测试用例 用例ID测试场景验证要点参考条款预期结果TC…

Vue 3 30天精进之旅:Day 29 - 项目实战

在学习了近一个月的Vue 3知识后&#xff0c;今天是我们学习旅程的第29天。在这一天&#xff0c;我们将专注于实践&#xff0c;通过一个小型项目来巩固之前的学习成果&#xff0c;并为之后的展示做好准备。 一、项目目标 我们将构建一个简单的个人博客应用&#xff0c;具备以下…

Windows Docker运行Implicit-SVSDF-Planner

Windows Docker运行GitHub - ZJU-FAST-Lab/Implicit-SVSDF-Planner: [SIGGRAPH 2024 & TOG] 1. 设置环境 我将项目git clone在D:/Github目录中。 下载ubuntu20.04 noetic镜像 docker pull osrf/ros:noetic-desktop-full-focal 启动容器&#xff0c;挂载主机的D:/Github文…