vxe-table 树形表格序号的使用

vxe-table 树形结构支持多种方式的序号,可以及时带层级的序号,也可以是自增的序号。

官网:https://vxetable.cn

带层级序号

在这里插入图片描述

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const gridOptions = reactive({border: true,treeConfig: {transform: true,rowField: 'id',parentField: 'parentId'},columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name', minWidth: 300, treeNode: true },{ field: 'size', title: 'Size' },{ field: 'type', title: 'Type' },{ field: 'date', title: 'Date' }],data: [{ id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },{ id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },{ id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },{ id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },{ id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' },{ id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },{ id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },{ id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' },{ id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' },{ id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' },{ id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },{ id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }]
})
</script>

通过 tree-config.seqMode=‘increasing’ 设置为自增序号

自增序号

在这里插入图片描述

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script>
export default {data () {const gridOptions = {border: true,treeConfig: {transform: true,rowField: 'id',parentField: 'parentId',seqMode: 'increasing'},columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name', minWidth: 300, treeNode: true },{ field: 'size', title: 'Size' },{ field: 'type', title: 'Type' },{ field: 'date', title: 'Date' }],data: [{ id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },{ id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },{ id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },{ id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },{ id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' },{ id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },{ id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },{ id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' },{ id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' },{ id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' },{ id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },{ id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }]}return {gridOptions}}
}
</script>

https://gitee.com/xuliangzhan/vxe-table

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

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

相关文章

SQL SERVER 2016 AlwaysOn 无域集群+负载均衡搭建与简测

之前和很多群友聊天发现对2016的无域和负载均衡满心期待&#xff0c;毕竟可以简单搭建而且可以不适用第三方负载均衡器&#xff0c;SQL自己可以负载了。windows2016已经可以下载使用了&#xff0c;那么这回终于可以揭开令人憧憬向往的AlwaysOn2016 负载均衡集群的神秘面纱了。 …

Groom Blender to UE5

Groom Blender to UE5 - Character & Animation - Epic Developer Community Forums Hello, 你好&#xff0c; While exporting my “groom” from blender to UE5, I notice that the curves have a minimal resolution in Unreal. However I would like to get the same …

TCP/IP协议图--TCP/IP基础

1. TCP/IP 的具体含义 从字面意义上讲&#xff0c;有人可能会认为 TCP/IP 是指 TCP 和 IP 两种协议。实际生活当中有时也确实就是指这两种协议。然而在很多情况下&#xff0c;它只是利用 IP 进行通信时所必须用到的协议群的统称。具体来说&#xff0c;IP 或 ICMP、TCP 或 UDP、…

R语言机器学习论文(二):数据准备

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据一、数据描述二、数据预处理(一)修改元素名称(二)剔除无关变量(三)缺失值检查(四)重复值检查(五)异常值检查三、描述性统计(一)连续变量数据情…

深入探讨Go语言中的双向链表

简介 双向链表是链表家族中的一种高级结构&#xff0c;每个节点不仅指向下一个节点&#xff0c;还指向上一个节点。今天&#xff0c;我们将学习如何在Go语言中实现和操作这种灵活的数据结构。 双向链表的优缺点 优点&#xff1a; 可以从任一方向遍历链表&#xff0c;灵活性高…

【算法】【优选算法】位运算(下)

目录 一、&#xff1a;⾯试题 01.01.判定字符是否唯⼀1.1 位图1.2 hash思路1.3 暴力枚举 二、268.丢失的数字2.1 位运算&#xff0c;异或2.2 数学求和 三、371.两整数之和四、137.只出现⼀次的数字 II五、⾯试题 17.19.消失的两个数字 一、&#xff1a;⾯试题 01.01.判定字符是…

【Docker】针对开发环境、测试环境、生产环境如何编排?

目录 一、引言 二、Docker Compose 文件基础 三、针对不同环境的 Docker 编排 开发环境 测试环境 生产环境 四、配置文件全局变量的编写 五、总结 一、引言 在软件开发和部署的过程中&#xff0c;不同的环境有着不同的需求和配置。Docker 作为一种强大的容器化技术&…

Flink:入门介绍

目录 一、Flink简介 2.1 Flink 架构 2.2 Flink 应用程序 运行模式 二、Flink 集群 部署 2.1 本地集群模式 2.1.1 安装JDK​编辑 2.1.2 下载、解压 Flink 2.1.3 启动集群 2.1.4 停止集群 2.2 Standalone 模式 2.2.0 集群规划 2.2.1 安装JDK 2.2.2 设置免密登录 2…

【RDMA】RDMA read和write编程实例(verbs API)

WRITE|READ编程&#xff08;RDMA read and write with IB verbs&#xff09; &#xff08;本文讲解的示例代码在&#xff1a;RDMA read and write with IB verbs | The Geek in the Corner&#xff09; 将 RDMA 与verbs一起使用非常简单&#xff1a;首先注册内存块&#xff0c…

洛谷P2670扫雷游戏(Java)

三.P2670 [NOIP2015 普及组] 扫雷游戏 题目背景 NOIP2015 普及组 T2 题目描述 扫雷游戏是一款十分经典的单机小游戏。在 n 行 m列的雷区中有一些格子含有地雷&#xff08;称之为地雷格&#xff09;&#xff0c;其他格子不含地雷&#xff08;称之为非地雷格&#xff09;。玩…

Git 详解

Git 详解 Git 是一个分布式版本控制系统&#xff0c;用于高效地管理项目代码的版本历史。它是目前最流行的版本控制工具之一&#xff0c;广泛应用于软件开发领域。Git 的分布式架构允许开发者在本地进行代码的版本管理&#xff0c;并与远程仓库同步&#xff0c;实现团队协作。…

JMS和消息中间件:Kafka/RocketMQ

文章目录 消息传递模型使用JMS还是KafkaKafka与RocketMQ的优缺点Kafka与RocketMQ的使用场景Kafka与RocketMQ的选型指南 TPM 项目中&#xff0c; iflow之间使用了JMS&#xff0c;后端项目与数据库通信使用Kafka MQ和JMS的区别&#xff1a; JMS是 java 用来处理消息的一个API规范…

深入浅出:Go语言中map的工作原理详解

目录 map 的简介哈希表的基础概念Go 中 map 的内部结构创建和使用 mapmap 的扩容机制处理冲突的方法map 的并发安全map 性能优化策略实际应用案例常见问题解答参考资料 深入浅出&#xff1a;Go 语言中 map 的工作原理与性能优化 map 的简介 在 Go 语言中&#xff0c;map 是…

泷羽sec专题课笔记-- Linux作业--开机自启动方法以及破解

本笔记为 泷羽sec 《红队全栈课程》学习笔记&#xff0c;课程请可自行前往B站学习&#xff0c;课程/笔记主要涉及网络安全相关知识、系统以及工具的介绍等&#xff0c;请使用该课程、本笔记以及课程和笔记中提及工具的读者&#xff0c;遵守网络安全相关法律法规&#xff0c;切勿…

Linux内核早期打印机制与RS485通信技术

往期内容 本专栏往期内容&#xff1a;Uart子系统 UART串口硬件介绍深入理解TTY体系&#xff1a;设备节点与驱动程序框架详解Linux串口应用编程&#xff1a;从UART到GPS模块及字符设备驱动 解UART 子系统&#xff1a;Linux Kernel 4.9.88 中的核心结构体与设计详解IMX 平台UART驱…

汽车网络安全 -- IDPS如何帮助OEM保证车辆全生命周期的信息安全

目录 1.强标的另一层解读 2.什么是IDPS 2.1 IDPS技术要点 2.2 车辆IDPS系统示例 3.车辆纵深防御架构 4.小结 1.强标的另一层解读 在最近发布的国家汽车安全强标《GB 44495》,在7.2节明确提出了12条关于通信安全的要求,分别涉及到车辆与车辆制造商云平台通信、车辆与车辆…

如何利用内链策略提升网站的整体权重?

内链是谷歌SEO中常常被低估的部分&#xff0c;实际上&#xff0c;合理的内链策略不仅能帮助提升页面间的关联性&#xff0c;还可以增强网站的整体权重。通过正确的内链布局&#xff0c;用户可以更流畅地浏览你的网站&#xff0c;谷歌爬虫也能更快地抓取到更多页面&#xff0c;有…

工业—使用Flink处理Kafka中的数据_ChangeRecord2

使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据&#xff0c;每隔 1 分钟输出最近 3 分钟的预警次数最多的 设备&#xff0c;将结果存入Redis 中&#xff0c; key 值为 “warning_last3min_everymin_out” &#xff0c; value 值为 “ 窗口结束时间&#xff0c;设备id” &am…

力扣第90题:带重复元素的子集

力扣第90题&#xff1a;带重复元素的子集 问题描述 给定一个整数数组nums&#xff0c;该数组可能包含重复元素。返回该数组所有可能的子集&#xff08;幂集&#xff09;&#xff0c;并且子集中的元素需要去重。返回的子集中的每个元素应按照非递减顺序排列。 例如&#xff0…

FFmpeg 4.3 音视频-多路H265监控录放C++开发十九,ffmpeg封装

封装就是将 一个h264&#xff0c;和一个aac文件重新封装成一个mp4文件。 这里我们的h264 和 aac都是来源于另一个mp4文件&#xff0c;也就是说&#xff0c;我们会将 in.mp4文件解封装成一路videoavstream 和 一路 audioavstream&#xff0c;然后 将这两路的 avstream 合并成一…