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

news2024/9/22 21:12:01

⚠️在官方实例中,树形结构的表格提供了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);

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

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

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

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

相关文章

“直播曝光“有哪些媒体直播分流资源?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 我们线下举办活动时&#xff0c;往往希望活动进行更大的曝光&#xff0c;随着视频直播越来越被大众认可&#xff0c;甚至成了活动的标配&#xff0c;那么做活动视频直播的时候&#xff0…

R语言批量计算t检验,输出pvalue和均值

1.输入数据如下&#xff1a; 2.代码如下 setwd("E:/R/Rscripts/rG4相关绘图") # 读取CSV文件 data <- read.csv("box-cds-ABD-不同类型rg4-2.csv", stringsAsFactors FALSE)# 筛选出Type2列为指定五种类型的数据 filtered_data <- subset(data, …

LockSupport与线程中断机制

中断机制是个协商机制 Interrupt(): 将中断状态设置为true Interrupted():&#xff08;静态方法&#xff09; 1.返回当前线程的中断状态 2.将中断状态清零并设置为false is Interrupted(): 判断当前线程是否被中断 如何停止中断运行中的线程&#xff1f; 一个线程不应该由…

提取html工具封装和应用

提取html工具封装和应用 BeautifulSoup库和介绍BeautifulSoup使用BeautifulSoup重点方法BeautifulSoup其他方法 认证参数化实现创建json文件导包&#xff08;参数化&#xff09;编写测试用例技术难点--判断验证码不同 BeautifulSoup库和介绍 BeautifulSoup使用 1、导包 2、实例…

C# OpenCvSharp 轮廓检测

目录 效果 代码 下载 效果 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.…

kubernetes K8s的监控系统Prometheus升级Grafana,来一个酷炫的Node监控界面(二)

上一篇文章《kubernetes K8s的监控系统Prometheus安装使用(一)》中使用的监控界面总感觉监控的节点数据太少&#xff0c;不能快算精准的判断出数据节点运行的状况。 今天我找一款非常酷炫的多维度数据监控界面&#xff0c;能够非常有把握的了解到各节点的数据&#xff0c;以及运…

【js刷题:数据结构数组篇之长度最小的子数组】

长度最小的子数组 一、题目二、方法1.暴力解法2.滑动窗口是什么 滑动窗口的起始位置滑动窗口的结束位置 一、题目 给定一个含有 n 个正整数的数组和一个正整数 s &#xff0c;找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&#xff0c;并返回其长度。如果不存在符合条件…

移动端开发思考:Uniapp的上位替代选择

文章目录 前言跨平台开发技术需求技术选型uniappFlutterMAUIAvalonia安卓原生 Flutter开发尝试Avalonia开发测试测试项目新建项目代码MainViewMainViewModel 发布/存档 MAUI实战&#xff0c;简单略过打包和Avalonia差不多 总结 前言 作为C# .NET程序员&#xff0c;我有一些移动…

虚拟机-从头配置Ubuntu18.04(包括anaconda,cuda,cudnn,pycharm,ros,vscode)

最好先安装anaconda后cuda和cudnn&#xff0c;因为配置环境的时候可能conda会覆盖cuda的路径&#xff08;不确定这种说法对不对&#xff0c;这里只是给大家的建议&#xff09; 准备工作&#xff1a; 1.Ubuntu18.04&#xff0c;x86_64&#xff0c;amd64 虚拟机下载和虚拟机Ubu…

鸿蒙OS开发实例:【手撸服务卡片】

介绍 服务卡片指导文档位于“开发/应用模型/Stage模型开发指导/Stage模型应用组件”路径下&#xff0c;说明其极其重要。 本篇文章将分享实现服务卡片的过程和代码 准备 请参照[官方指导]&#xff0c;创建一个Demo工程&#xff0c;选择Stage模型 鸿蒙OS开发更多内容↓点击…

cookie,sessionStorage,localStorage的区别及应用场景、http状态码含义、使用token登录、无感登录

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式&#xff0c;可以利用cookie&#xff0c;session等跟服务端进行数据交互。 浏览器的存储方式有哪些&#xff1f; 1.cookiesH5标准前的本地存储方式兼容性好&#xff0c;请求头自带cookie存储量小&#xff0c;资源浪费…

Apache Hive的基本使用语法(二)

Hive SQL操作 7、修改表 表重命名 alter table score4 rename to score5;修改表属性值 # 修改内外表属性 ALTER TABLE table_name SET TBLPROPERTIES("EXTERNAL""TRUE"); # 修改表注释 ALTER TABLE table_name SET TBLPROPERTIES (comment new_commen…

某某消消乐增加步数漏洞分析

一、漏洞简介 1&#xff09; 漏洞所属游戏名及基本介绍&#xff1a;某某消消乐&#xff0c;三消游戏&#xff0c;类似爱消除。 2&#xff09; 漏洞对应游戏版本及平台&#xff1a;某某消消乐Android 1.22.22。 3&#xff09; 漏洞功能&#xff1a;增加游戏步数。 4&#xf…

zabbix通过jmx监控Tongweb7企业版(by lqw)

一.tongweb配置相关启动参数 参考Zabbix 监控 Tomcat 服务 可以在控制台页面&#xff0c;或者在tongweb的安装目录的bin目录下&#xff0c;找到external.vmoptions&#xff0c;进行配置&#xff1a; 配置内容如下&#xff1a; -Dcom.sun.management.jmxremote -Dcom.sun.mana…

ES学习日记(一)-------单节点安装启动

基于ES7.4.1编写,其实一开始用的最新的8.1,但是问题太多了!!!!不稳定,降到7.4 下载好的安装包上传到服务器或虚拟机,创建ES目录,命令mkdir -p /路径xxxx 复制安装包到指定路径并解压: tar zxvf elasticsearch-8.1.0-linux-x86_64.tar.gz -C /usr/local/es/ 进入bin目录安装,命…

学习transformer模型-矩阵乘法;与点积dot product的关系;计算attention

矩阵乘法&#xff1a; 1、当矩阵A的列数&#xff08;column&#xff09;等于矩阵B的行数&#xff08;row&#xff09;时&#xff0c;A与B可以相乘。 Ankie的评论&#xff1a;一个人是站着的&#xff0c;一个人是躺着的&#xff0c;站着的高度躺着的长度。 在计算attention的时候…

基于单片机工业生产现场的光照强度控制系统设计

**单片机设计介绍&#xff0c;基于单片机工业生产现场的光照强度控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机工业生产现场的光照强度控制系统设计概要主要包括以下几个关键部分&#xff1a;硬件设计、…

Android Studio不显示ADB Wi-Fi和Device Explorer的解决办法

我一直使用Android Studio。最近发现打开个别项目时&#xff0c;不显示ADB Wi-Fi和Device Explorer的图标&#xff0c;而有的项目就会显示。开始以为是插件错误&#xff0c;于是卸载了ADB Wi-Fi插件&#xff0c;并重新安装。但问题依旧。 后来发现&#xff0c;原来是在菜单的“…

二维双指针,滑动窗口

二维双指针 思路&#xff1a;考虑暴力做法&#xff0c;我们统计前缀和&#xff0c;然后枚举以 ( x 1 , y 1 ) (x_1,y_1) (x1​,y1​), ( x 2 , y 2 ) (x_2,y_2) (x2​,y2​)为左上&#xff0c;右下顶点的矩阵有多少是合法的&#xff0c;那么&#xff0c;这样的时间复杂度为 n 4…

【MySQL】15. 事务管理(重点) -- 1

1. CURD不加控制&#xff0c;会有什么问题&#xff1f; 2. CURD满足什么属性&#xff0c;能解决上述问题&#xff1f; 买票的过程得是原子的 ?买票互相应该不能影响 ?买完票应该要永久有效 ?买前&#xff0c;和买后都要是确定的状态? 3. 什么是事务&#xff1f; 事务就是…