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

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

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

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

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

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

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

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

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

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

<ZnEnhanceTable
  ref="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);

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从零开始学Python(五)面向对象

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Python的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.类的定义 二.魔法方法 1.概念 2.常…

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

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

物联网实验

实验1 基于ZStack光敏传感器实验 1.实验目的 我们通过上位机发指令给协调器&#xff0c;协调器把串口接收到的指令通过Zigbee协议无线发送给带有光敏传感器的终端节点&#xff0c;获取到数据以后把数据返回给上位机&#xff0c;实现无线获取数据的目的。 2.实验设备 硬件&a…

企业鸿蒙原生应用元服务备案实操包名公钥签名信息

一、鸿蒙应用/元服务如何查询包名&#xff1f; 登录 AppGallery Connect &#xff0c;点击“我的应用”&#xff0c;输入应用名称可查询到需要备案的鸿蒙应用/元服务包名。 二、鸿蒙应用/元服务如何获取公钥和签名信息&#xff1f; &#xff08;1&#xff09;登录 AppGaller…

【IC验证】类的一些问题

1、句柄悬空 在声明句柄和创建对象以后&#xff0c;句柄是悬空的&#xff0c;在仿真没开始时内容为null。但是对于结构体和module的例化&#xff0c;仿真开始之前变量就给了一个不确定的值&#xff08;32hxxxx&#xff09; 但是对于放在initial块里面的&#xff0c;在仿真之前…

龙蜥社区「人人都可以参与开源」——体验开源成为“开源人“

龙蜥社区「人人都可以参与开源」体验开源——让更多的人了解开源&#xff01; 龙蜥社区开源概述&#xff1a;龙蜥社区开源的探索过程:龙蜥社区收获总结:AtomGit评测:服务设计上:功能结构上:安全设计上: AtomGit测评总结: 龙蜥社区开源概述&#xff1a; 在追求技术的路上少不了…

【智能算法】人工电场算法(AEFA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2019年&#xff0c;A Yadav等人受库伦定律和运动定律启发&#xff0c;提出了人工电场算法&#xff08;Artificial Electric Field Algorithm&#xff0c;AEFA&#xff09;。 2.算法原理 2.1算法思…

二维相位解包理论算法和软件【全文翻译- DCT相位解包裹(5.3.2)】

5.3.2 基于 DCT 的方法 在本节中,我们将详细介绍如何通过 DCT 算法解决非加权最小二乘相位解缠问题,而不是通过FFT.我们将使用公式 5.53 所定义的二维余弦变换。我们开发的算法等同于 FFT 方法 2(第 5.3.1 节)。与 FFT 方法 I 等价的 DCT 算法也可以推导出来,但我们将其作…

selenium 如何获取 session 指定的数据

代码核心在于这几个部分&#xff1a; 其一&#xff1a;使用元素定位来获取页面上指定需要抓取的关键字&#xff1b; 其二&#xff1a;将页面上定位得到的数据永久存储到本地文件中。 具体来梳理一下从访问URL开始到爬取数据整个流程下来的各个节点我们都做了哪些工作。 我们来看…

C语言——详解字符函数和字符串函数(二)

Hi,铁子们好呀&#xff01;之前博主给大家简单地介绍了部分字符和字符串函数&#xff0c;那么这次&#xff0c;博主将会把这些字符串函数给大家依次讲完&#xff01; 今天讲的具体内容如下: 文章目录 6.strcmp函数的使用及模拟实现6.1 strcmp函数介绍和基本使用6.1.1 strcmp函…

Vulnhub靶机练习笔记-Os-hackNos-1

vulnhub靶机下载 https://www.vulnhub.com/entry/hacknos-os-hacknos,401/ 靶场环境&#xff1a; NAT模式 kali&#xff1a;192.168.242.131 靶机&#xff1a;192.168.242.142 渗透 nmap探测靶机 开放了80和22端口 dirsearch对80端口进行目录扫描&#xff0c;发现drupal…

nacos derby.log无法的读取+derby数据库启动失败分析解决

排查思路分析 日志报错&#xff1a; derby.log文件权限不够&#xff08;root权限&#xff09;&#xff0c;无法读取&#xff0c;我用普通用户启动。 使用命令chown xx:xx derby.log修改属主和属组为普通用户后&#xff0c;又报出其他错误。 数据库启动不了&#xff0c;无…

图片怎么批量改格式png改jpg?一键批量搞定方法

在创建幻灯片或演示文稿时&#xff0c;使用jpg格式可以减小文件大小&#xff0c;方便分享和传输。转换png格式的图片为jpg&#xff0c;可以确保文件大小的合理控制&#xff0c;同时保持图像的可视质量&#xff0c;当遇到需要批量处理的时候&#xff0c;许多小伙伴都不太懂图片怎…

鸿蒙OS开发学习:【尺寸适配实现】

概述 在鸿蒙开发中&#xff0c;尺寸适配是一个重要的概念&#xff0c;它可以帮助我们在不同屏幕尺寸的设备上正确显示和布局我们的应用程序。本文将介绍如何在鸿蒙开发中实现尺寸适配的方法。 流程图 详细步骤 1. 定义适配方案 在鸿蒙开发中&#xff0c;我们可以通过定义适…

基于springboot+vue实现的的成人教育教务系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

Windows Nginx 启动

先解压 nginx安装包&#xff0c;进入到安装目录下(配置环境变量没有用) 解压后的目录结构如上。 #启动服务 默认是80端口&#xff0c; #如果端口被占用&#xff0c;是启动不了的&#xff0c;会生成error log在log目录下 start nginx#停止nginx 服务 nginx -s stop#重新加载配置…

C语言进阶课程学习记录-第29课 - 指针和数组分析(下)

C语言进阶课程学习记录-第29课 - 指针和数组分析&#xff08;下&#xff09; 数组名与指针实验-数组形式转换实验-数组名与指针的差异实验-转化后数组名加一的比较实验-数组名作为函数形参小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课…

数字社会下的智慧公厕:构筑智慧城市的重要组成部分

智慧城市已经成为现代城市发展的趋势&#xff0c;而其中的数字化转型更是推动未来社会治理体系和治理能力现代化的必然要求。在智慧城市建设中&#xff0c;智慧公厕作为一种新形态的信息化公共厕所&#xff0c;扮演着重要角色。本文智慧公厕源头实力厂家广州中期科技有限公司&a…

线圈大小的测量和圈数的绕制办法

测量一根线圈的大小&#xff0c;让线圈多出来一公分多一点&#xff01;&#xff01;&#xff01; 我在这简称样圈 然后在模具上进行绕制。 把样圈放在模具上&#xff0c;松紧度要刚好&#xff0c;确定好模具 具体位置 线记在 中间铁心上 开始绕制 这叫做一圈 绕好相应的圈数后…

如何通过代码混淆绕过苹果机审,解决APP被拒问题

目录 iOS代码混淆 功能分析 实现流程 类名修改 方法名修改 生成垃圾代码 替换png等静态资源MD5 info.plist文件添加垃圾字段 功能分析 实现流程 类名修改 方法名修改 生成垃圾代码 替换png等静态资源MD5 info.plist文件添加垃圾字段 混淆前后对比 iOS代码混淆 …