tdesign坑之EnhancedTable树形结构默认展开所有行

⚠️在官方实例中,树形结构的表格提供了2种方法控制展开全部节点:

一是通过配置属性tree.defaultExpandAll为true代表默认展开全部节点(仅默认情况有效);

二是使用组件实例方法expandAll()可以自由控制树形结构的展开;

(1)第一种方法需要注意的是仅初始化数据的时候有效,在以下场景中使用无效:

已为EnhancedTable组件配置了defaultExpandAll为true,在onMounted页面元素挂载完数据之后给表格数据data赋值,

<ZnEnhanceTableref="tableRef"row-key="id":data="tableData":columns="tableColumns":tree="{defaultExpandAll: true, // 默认展开所有节点}":tree-expand-and-fold-icon="treeExpandAndFoldIconRender"
>

但此时树形结构仍是收起状态:
在这里插入图片描述

由于该属性仅初始化数据的时候有效,而在onMounted生命周期中组件实例已挂载完毕,初始化数据是空数组:[],无数据可展开,等待接口请求完毕后再赋值视图不再刷新,所以页面展示节点仍是收起状态。(验证:在onBeforeMount生命周期中做数据赋值能展开所有行,在onMounted生命周期中则无效)

解决方案给组件绑定动态key值,这样就算接口数据请求回来也会重新渲染树结构,初始化数据。

<ZnEnhanceTableref="tableRef"row-key="id":key="tableData.length":data="tableData":columns="tableColumns":tree="{defaultExpandAll: true, // 默认展开所有节点}":tree-expand-and-fold-icon="treeExpandAndFoldIconRender">

(2)第二种方法需要注意的是在接口数据请求回来后存在异步问题,直接调用组件实例方法expandAll()控制树形结构的展开有可能会失效。

解决方案利用延时函数,在事件循环中会把延时队列中的方法放在微任务之后执行。

setTimeout(async () => {await tableRef.value.expandAll();
}, 0);

缺点:等待接口请求数据赋值完之后再手动调用组件实例方法的话,在网络卡顿情况下会有明显的停滞感,用户体验不佳。

综上所述,采用第一种配置方法更合理些。

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

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

相关文章

Bert基础(十二)--Bert变体之知识蒸馏原理解读

B站视频&#xff1a;https://www.bilibili.com/video/BV1nx4y1v7F5/ 白话知识蒸馏 在前面&#xff0c;我们了解了BERT的工作原理&#xff0c;并探讨了BERT的不同变体。我们学习了如何针对下游任务微调预训练的BERT模型&#xff0c;从而省去从头开始训练BERT的时间。但是&#…

311_C++_QT表格的单个item的撤销、恢复操作,代码量很小,轻量化

:初始截图 :修改截图 :撤销截图 connect(m_customTableWidget, &QTableWidget::itemChanged, this, &FileDoc::itemChanged);

离心机租赁,冷冻离心机租借,实验室离心机租售,大容量离心机以租代买

离心机租赁,冷冻离心机租借,实验室离心机租售,大容量离心机以租代买&#xff0c;满足广大客户对离心的租赁与购买需求! 服务优势 1、以租代买&#xff1a;租期达到一定期限&#xff0c;租金抵扣货款&#xff1b; 2、快速上门&#xff1a;2分钟响应&#xff0c;同城12小时内到…

短剧在线搜索PHP网站源码

源码简介 短剧在线搜索PHP网站源码&#xff0c;自带本地数据库500数据&#xff0c;共有6000短剧视频&#xff0c;与短剧猫一样。 搭建环境 PHP 7.3 Mysql 5.6 安装教程 1.上传源码到网站目录中 2.修改【admin.php】中&#xff0c; $username ‘后台登录账号’; $passwor…

【C++】lambda表达式

目录 一、lambda表达式1.1 C98中的例子1.2 lambda表达式语法1.3 函数对象与lambda表达式 一、lambda表达式 1.1 C98中的例子 如果要对一个数据集合进行排序&#xff0c;可以使用sort函数&#xff1a; int main() {int array[] { 4,1,8,5,3,7,0,9,2,6 };// 默认按照小于比较…

Vue-Router入门

现在的前后端分离项目&#xff0c;后端只管数据传递&#xff0c;视图跳转的活交由前端来干了&#xff0c;vue-router就是专门来干这个活的&#xff0c;它可以让页面跳转到指定组件 组件是可复用的 Vue 实例, 把一些公共的模块抽取出来&#xff0c;然后写成单独的的工具组件或者…

面对DDOS攻击,有哪些解决办法

随着互联网带宽的持续增长以及DDOS黑客技术的发展&#xff0c;DDOS拒绝服务攻击的实施变得愈发容易。商业竞争、打击报复、网络敲诈等多种因素&#xff0c;各行各业的用户都曾受到DDOS攻击的威胁。 一旦遭受到DDOS攻击&#xff0c;随之而来的就是业务宕机&#xff0c;用户无法…

44.网络游戏逆向分析与漏洞攻防-角色管理功能通信分析-角色创建服务器反馈数据包分析

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 现在的代码都是依据数据包来写的&#xff0c;如果看不懂代码&#xff0c;就说明没看懂数据包…

转让北京装饰装修二级和建筑幕墙施工二级流程和条件

我公司可以帮您快速办理北京市各类建筑姿质申请&#xff0c;也有现成的姿质转让&#xff0c;新申请建筑姿质要求比较高&#xff0c;但是对于企业来说&#xff0c;承接模板脚手架工程也是需要具备姿质的&#xff0c;该姿质也就是模板脚手架姿质&#xff0c;那么对于企业想要申请…

基于Java+SpringBoot+Vue幼儿园管理系统(源码+文档+部署+讲解)

一.系统概述 随着信息时代的来临&#xff0c;过去的传统管理方式缺点逐渐暴露&#xff0c;对过去的传统管理方式的缺点进行分析&#xff0c;采取计算机方式构建幼儿园管理系统。本文通过课题背景、课题目的及意义相关技术&#xff0c;提出了一种教 学生信息、学生考勤、健康记录…

Fecify 商品标签功能

关于商品标签 商品标签是指商家可以在展示商品时&#xff0c;自己创建一个自定义标签&#xff0c;可自定义某个关键词或短语。这样顾客在浏览商城时&#xff0c;只需要通过标签就能看到更直观的展示信息。 商品标签可以按照用户的属性、行为、偏好等进行分类&#xff0c;标签要…

传输大咖22|如何利用ProtoBuf实现高效的数据传输?

在今日信息技术日新月异的时代&#xff0c;数据传输的速度与安全性无疑成为了软件开发中的重中之重。无论是微服务架构下的服务间交流&#xff0c;还是客户端与服务器间的数据互动&#xff0c;寻求一种既高效又稳妥的数据传输方式已成为共识。尽管传统的数据格式&#xff0c;如…

水务行业如何实现数字化转型实现智能化管理

水务行业在当下已经迈入了新的发展阶段&#xff0c;行业内增大了信息化、数字化的探索&#xff0c;尤其是智能化技术出现以后&#xff0c;智能水务概念的提出使得水务数字化转型成为可能。但我国水务行业经历了漫长的发展时期&#xff0c;在很长一段时间内因为存在发展思路、技…

骨传导耳机怎么选?这五款骨传导耳机性能好、配置高,跟着买不出错!

如今&#xff0c;骨传导耳机作为一种创意十足的蓝牙耳机&#xff0c;正在逐渐走入千家万户&#xff0c;成为最受欢迎的耳机款式。然而&#xff0c;随着骨传导耳机的热度增加&#xff0c;市面上开始出现各式各样的骨传导耳机品牌&#xff0c;面对琳琅满目的骨传导耳机品牌&#…

基于SpringBoot的“垃圾分类网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“垃圾分类网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 系统功能界面图 用户登录、用户注…

方案分享 | 针对ETC系统的OBE-SAM模块设计方案

ETC&#xff08;Electrical Toll Collection&#xff09;不停车收费是目前世界上最先进的路桥收费方式。通过安装在车辆挡风玻璃上的车载单元与安装在收费站 ETC 车道上的路侧单元之间的微波专用短程通讯&#xff0c;利用计算机联网技术与银行进行后台结算处理&#xff0c;从而…

2024软件测试工具测评,总有一款适合你!

在软件开发周期中&#xff0c;测试是确保产品质量的关键环节。随着企业对于软件质量的要求日益提升&#xff0c;测试人员面临着前所未有的挑战&#xff0c;“工欲善其事必先利其器”&#xff0c;选择一款高效、实用的软件测试工具&#xff0c;不仅能够提升测试效率&#xff0c;…

ElasticSearch分词检索

1. 倒排索引&#xff1a;表示一种数据结构&#xff0c;分词词条与文档id集合的隐射关系 2. 它跟关系型数据库是一种互补的关系&#xff0c;因为关系型数据库支持事务操作&#xff0c;满足ACID原则 3. 索引库的文档字段只允许新增不允许修改 1.创建索引库 put /索引库名称2.1 …

吴恩达2022机器学习专项课程(一) 5.8 学习率的选择

问题预览/关键词 梯度下降不正常工作的曲线是什么样子&#xff1f;如何调试学习率来检测代码中的bug&#xff1f;学习率过小的后果是&#xff1f;如何选择学习率&#xff1f; 笔记 1.曲线错误的样子 曲线没有逐步递减&#xff0c;由于学习率选择过大或代码有bug。 2.调试…

LeetCode-279. 完全平方数【广度优先搜索 数学 动态规划】

LeetCode-279. 完全平方数【广度优先搜索 数学 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;Python 动态规划五部曲&#xff08;完全平方数就是物品&#xff08;可以无限件使用&#xff09;&#xff0c;凑个正整数n就是背包&#xff0c;问凑满这个背包最少有多少物品…