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,一经查实,立即删除!

相关文章

web页面刷新,怎么使每次的随机颜色都一样?

// 创建一个种子随机数生成器 function seededRandom(seed) { var x Math.sin(seed) * 10000; return x - Math.floor(x); } // 使用种子随机数生成器来生成颜色 function generateColor(id) { var random seededRandom(id); var r Math.floor(random * 256); var g Math.…

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);

o(∩_∩)o设置代理访问博客(三)o(∩_∩)o

增加定时执行功能 直接看代码实现&#xff1a; # -*- coding:UTF-8 -*-import json import random import re import threading import time from datetime import timedeltaimport requests from bs4 import BeautifulSoup from loguru import loggeruid "qq_17328759…

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

离心机租赁,冷冻离心机租借,实验室离心机租售,大容量离心机以租代买&#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;就说明没看懂数据包…

MySQL 慢查询优化案例

​>优质博文&#xff1a;IT-BLOG-CN 一、慢查询优化基本步骤 【1】先运行看看是否真的很慢&#xff0c;注意设置SQL_NO_CACHE&#xff08;查询时不使用缓存&#xff09;&#xff1b; 【2】where条件单表查&#xff0c;锁定最小返回记录表。这句话的意思是把查询语句的 whe…

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

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

Java实现线程同步的几种方式

synchronized 特点: 简单易用&#xff1a; synchronized 关键字的使用非常简单&#xff0c;它可以直接应用于方法或代码块上。对于对象和类的同步方法&#xff0c;JVM负责加锁和释放锁&#xff0c;开发者不需要手动操作。自动释放锁&#xff1a; 当synchronized方法或代码块执…

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

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

Python map遍历

在Python中&#xff0c;map 函数是一个内置函数&#xff0c;它将指定的函数应用于给定序列&#xff08;如列表、元组等&#xff09;的每个项&#xff0c;并返回一个迭代器&#xff0c;该迭代器包含所有项经过指定函数处理后的结果。 ### map 函数的基本用法 map 函数的语法如…

centos如何卸载mysql

在CentOS系统中卸载MySQL&#xff0c;你可以遵循以下步骤&#xff1a; 停止MySQL服务&#xff1a; 1sudo systemctl stop mysqld 列出已安装的MySQL相关组件&#xff1a; 1sudo yum list installed | grep mysql 卸载所有MySQL相关的RPM包&#xff1a; 1sudo yum remove mysq…

PM2+Linux部署nuxt.js

PM2Linux部署nuxt.js 开始我使用了docker部署我的springboot项目&#xff0c;链接在这里&#xff0c;因为我是前后端分离项目&#xff0c;前端使用的nuxt.js框架&#xff0c;所以需要另外部署一下项目&#xff0c;以下是部署流程 1.将本地的nuxt项目打包 npm run build #生成…

Fecify 商品标签功能

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

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

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

坚持10天做完Python入门编程100题第二天

坚持十天做完Python入门编程100题第二天 第8题 列表的排序第9题 字典的创建第10题第11题 对字典的值求和第12题 字典推导式第13题 打印小写字母a~z第14题 计算1-100之间的偶数之和 第8题 列表的排序 列表num_list [3, 1, 5, 9, 15, 2, 7]&#xff0c;如和将列表按照从大到小的…