Element Plus Table 组件树形渲染实现方法

ops/2024/12/17 0:53:35/

Element Plus的Table组件通过指定列表数据的children属性,实现树形数据的渲染;同时使用row-key标识唯一的行,依赖排序和子节点数据结构,以实现连动操作。
重要的设置有:

  • 树形渲染配置项: 通过tree-props 配置定义树形数据结构,例如指定子节点属性名为children。
  • 唯一key设置: 通过row-key 解决树形数据表的唯一标识问题。
    - 如果数据是懒加载的tree-props中才需要hasChildren属性,非懒加载不用加,加了无法渲染树形结构
<el-table:data="tableData"row-key="id"borderstyle="width: 100%":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="Name" /></el-table>

父级别显示序号而子级不显示序号 的效果,可以在 el-table-column 中通过一个简单的逻辑判断来控制:

  • 在序号列的插槽中判断是否为父级。
  • 父级可以通过没有 children 属性或特定条件来标识。
<el-table-column label="No." width="100"><template #default="{ row, $index }"><span v-if="!row.children">{{ $index + 1 }}</span></template></el-table-column>

http://www.ppmy.cn/ops/142507.html

相关文章

nodeJS转换视频格式

系统需要先安装 FFmpeg Download FFmpeg node安装模块 npm install fluent-ffmpeg 使用示例 把 wmv 格式转换 mp4 格式 const ffmpeg require(fluent-ffmpeg) const path require(path)function convertWmvToMp4(inputPath, outputPath) {ffmpeg(inputPath).output(outputP…

React基础学习

React基础 &#x1f4e3; &#x1f4e3; &#x1f4e3; &#x1f4e2;&#x1f4e2;&#x1f4e2; ☀️☀️点开就是缘分认识一下&#xff0c;我是小冷。是一个兴趣驱动自学练习两年半的的Java工程师。 &#x1f4d2; 一位十分喜欢将知识分享出来的Java博主⭐️⭐️⭐️&#x…

Vue3之响应式系统详解

Vue3中的响应式系统是其核心功能之一&#xff0c;它使得数据变化能够自动触发视图更新&#xff0c;从而简化了开发过程&#xff0c;提高了开发效率。本文将详细阐述Vue3中的响应式系统&#xff0c;包括其核心概念、工作原理、实现方式、应用场景以及优势。同时&#xff0c;本文…

web自动化测试框架playwright

一、背景&#xff1a;UI自动化的痛点&#xff1a; 1、设计脚本耗时&#xff1a; 需要思考要如何模拟用户的操作&#xff0c;如何触发页面的事件&#xff0c;还要思考如何设计脚本&#xff0c;定位和操作要交互的元素、路径、位置&#xff0c;再编写代码逻辑&#xff0c;往复循…

庆祝 2024 年的开源:热门项目和里程碑

随着 2024 年接近尾声&#xff0c;开源社区有很多值得庆祝的事情。今年展示了集体创新的巨大潜力&#xff0c;各行各业都涌现了开创性项目。从 AI 和可持续性到软件开发和创意工具&#xff0c;开源再次证明了其变革的力量。让我们回顾一下今年的主要亮点以及定义 2024 年开源的…

全球叉车市场 2023 - 2032 年发展趋势:自动化、电商与电动叉车的崛起

全球叉车市场到2032年将达到955.1亿美元&#xff0c;年复合增长率为7.49% | Astute Analytica 全球叉车市场正迎来显著增长&#xff0c;市场估值预计将从2023年的498.6亿美元增长至2032年的955.1亿美元&#xff0c;预测期内年复合增长率&#xff08;CAGR&#xff09;为7.49%。这…

HTML知识点详解教程

文章目录 HTML知识点详解教程1. HTML基本语法2. HTML标签详解2.1 分区标签 <div>2.2 标题标签 <h1> ~ <h6>2.3 段落标签 <p>2.4 图片标签 <img>2.5 列表标签 <ul> 和 <ol>无序列表 <ul>有序列表 <ol> 2.6 超链接标签 &l…

Java Web 12 MyBatis 入门 增删改查 动态SQL

本文是MyBatis的手把手式全面教程 作者凌晨三点整理而成 祝好&#xff01; 目录 前言 什么是MyBatis&#xff1f; 1、快速入门 ①、案例介绍 ②、实现过程 ③、小结 ④、扩展&#xff1a;配置SQL提示 2、JDBC介绍 ①、本质 ②、JDBC操作数据库代码示例 ③、原始JD…