当前位置: 首页 > news >正文

Vue3中无法为el-tree-select设置反选问题分析

 环境:Vue3.2、Element Plus

  问题:子组件 setting.vue => 弹窗组件 Dialog => 树选择组件el-tree-select ,无法设置默认选中项 default-checked-keys

  场景:在一个后台系统的列表页,选中一行数据,点击设置按钮,分配一些功能。这里的做法是把设置页封装在一个子组件里了,并且子组件里使用了Element Plus的Dialog组件

               然后Dialog里有个el-tree-select需要初始化赋值,因为在分配之前,可能之前分配过,需要设置反选

  最开始是直接写死,如下:

<template><el-tree-select 

    :data="store().UserMenus"

    :default-expanded-keys="['xxxxxxxx']" />
</template>

  然后发现不生效,周五的时候也能猜到原因,data绑定的pinia全局状态里的值,组件被实例化时这个值可能还未被加载,所以设置default-expanded-keys时它就找不到节点数据,等组件被创建后,data有值了,但是default-expanded-keys又不会再重新设置了,就造成组件有下拉数据,但是没有反选效果。

  起初以为是个简单问题,于是动了动脑子,既然和顺序有关,那自然考虑到生命周期了,于是在setting.vue里加上onMounted,并在这里重新赋值:

// script ts

const list = ref()

const selectArr = ref<string[]>([])

onMounted(() => {

  list.value = store().UserMenus

  selectArr.value = ['xxxxxxxx']

})

// setting.vue

<template><el-tree-select 

    :data="list"

    :default-expanded-keys="selectArr" />
</template>

  data绑定list这个变量,default-expanded-keys绑定selectArr。嗯,以为可以了,结果还是没有反选成功。就.....离谱~

  正常来讲onMounted函数已经是组件创建完毕并创建Dom了,这个时候我应该可以设置list的值,再设置selectArr。但实际依然没有反选成功。

  这说明加载依然存在问题,抱着研究的心态,于是我又想起一种方法,我可以通过调用el-tree-select的API来通过方法设置它的默认值,也就是setCheckedKeys方法!

  通过模板引用,获取到el-tree-select,命名为tree,然后回到onMounted里打印:console.log(tree.value),好家伙,居然是个undefined,这说明在settting.vue的onMounted根本就无法设置选中的keys。然后诡异的是,在我反复修改代码的时候,由于热重载,Vue页面会随之更新,居然能反选上了!但是我一刷新,反选立刻失效。enmmmm ..... 基本能定位到问题的所在了,onMounted是无法获取到组件的,后面试了一下onUnmounted,这个可以,但是我这是初始化逻辑,不可能写在onUnmounted里。

  这里面还存在一个因素导致该问题的产生,就是Dialog默认是不显示的,通过v-model="dialogVisible"绑定的变量控制显示隐藏,初始化值为false也是导致失效的一个原因,如我初始时设置dialogVisible.value = true ,那么反选是OK的,只不过我依然不可能设置为true,哪有弹窗一开始就显示的。

  周五下午基本卡在这个地方了,经过周末的放空自我(峡谷Timi),周一早上上班的路上复盘了一下,考虑从Dialog本身寻找答案,嘿,果不其然,它的API里有个opened方法,Dialog 打开动画结束时的回调,我在这里做初始化,问题就解决了:

// Dialog
@opened="opened"// script ts 
const opened = () => {selectArr.value = ['xxxxxxxx']
}

  之所以能找到这个思路,还有一个原因是也试了一下表单,之前表单的提交事件里一直可以获取到表单对象,然后试了一下onMounted里能不能获取到,结果也是类似的情况。放个按钮,在按钮的点击事件里是可以获取到组件的,因为等你可以点击按钮时,页面什么东西都加载完毕了,同样的,Dialog 打开动画结束时的回调里,页面肯定早加载完毕了,该有的值都有了,那么这个时候做初始化就不会存在找不到key的问题了。

 

  这个问题看似简单,最后opened方法搞定了,但实际很考验Vue的功底,什么时候组件被创建,什么时候数据被加载,每个属性之间数据的联动以及先后顺序,如果你写个固定值放在data和keys那里,肯定没这个问题,Element Plus官方文档大把的案例拿过来直接就有效果,但是呢,实际的项目开发中,经常是多个技术点综合在一起,你基本不可能把一个下拉框的值写死了,也许你和我一样从pinia里取的值,也许你通过axios读的数据,也许是别的路子,但是多少会遇到一些和预期不符的时候,因此这里以这个案例分享一下,自己也做个记录,如果有人遇到了类似的问题可以参考一二,有更好的方案也可以提出来一起交流交流。

相关文章:

Vue3中无法为el-tree-select设置反选问题分析

环境&#xff1a;Vue3.2、Element Plus 问题&#xff1a;子组件 setting.vue > 弹窗组件 Dialog > 树选择组件el-tree-select &#xff0c;无法设置默认选中项 default-checked-keys 场景&#xff1a;在一个后台系统的列表页&#xff0c;选中一行数据&#xff0c;点击设置…...

Redis - 缓存持久化

Redis 的缓存持久化有两种技术 &#xff1a; RDB 和 AOF RDB Redis 的数据快照 简单说就是将缓存中的所有数据都记录到磁盘中&#xff0c;当Redis发生故障的时候&#xff0c;只需读取快照文件&#xff0c;就可恢复数据 相应的命令是 save 和 bgsave &#xff0c;这两个命名…...

Pandas进阶修炼120题-第三期(金融数据处理,51-80题)

目录 往期内容&#xff1a;第一期&#xff1a;Pandas基础&#xff08;1-20题&#xff09;第二期&#xff1a;Pandas数据处理&#xff08;21-50题&#xff09; 第三期 金融数据处理51.使用绝对路径读取本地Excel数据方法一&#xff1a;双反斜杠绝对路径方法二&#xff1a;r 拓展…...

3、HAproxy高级配置

基于cookie的会话保持 在 HAProxy 中&#xff0c;可以通过使用 cookie 配置来实现基于 Cookie 的会话保持。cookie 配置用于配置与会话保持相关的选项&#xff0c;允许您定义要在HTTP响应中插入或重写的Cookie以及其他与Cookie会话保持相关的参数。 以下是一些常用的 cookie 配…...

tcpdump网络抓包工具的使用

tcpdump 是一款用在linux系统上的网络抓包工具 1、 基本语法 tcpdump 的常用参数如下&#xff1a; tcpdump -i eth0 -nn -s0 -v port 80-i : 选择要捕获的接口&#xff0c;通常是以太网卡或无线网卡&#xff0c;也可以是 vlan 或其他特殊接口。如果该系统上只有一个网络接口&…...

AMEYA360旗下品牌:日本SUSUMU推出RGV系列贴片电阻器新产品

电动汽车、机器人、精密测量仪器——在上述三例应用领域中&#xff0c;具有高精度、坚固性和长期稳定性的组件是必不可少的。对于这些和类似的应用&#xff0c;RGV系列精密电阻器是理想的选择。 RGV系列电阻器 RGV系列金属薄膜贴片电阻器的电阻值范围为120kΩ至3MΩ&#xff08…...

git-版本控制器

集中式版本控制工具&#xff08;不常用&#xff09; 版本库集中于中央服务器&#xff0c;team要联网才能工作&#xff08;下载代码&#xff09; SVN CVS 分布式版本控制工具 每个电脑上都有一个完整的版本库&#xff0c;工作时无需联网&#xff0c;可以把修改推送给其他人来…...

台式机/工控机通过网线共享笔记本电脑无线网络linux系统下 usb网卡的驱动安装

一、台式机/工控机通过网线共享笔记本电脑无线网络 1、 将台式机通过网线和笔记本连接。 2、 将笔记本的“本地连接”和“无线网络连接”的ipv4均设置为自动获取。 4.修改台式机的IP地址为如下&#xff08;对应笔记本信息&#xff09; IP地址为192.168.XXX.12 子网掩码为255.2…...

kotlin 编写一个简单的天气预报app(五)增加forcast接口并显示

参考资料 OpenWeatherMap提供了一个/forecast接口&#xff0c;用于获取未来几天的天气预报。你可以使用HTTP GET请求访问该接口&#xff0c;并根据你所在的城市或地理坐标获取相应的天气数据。 以下是一个示例请求的URL和一些常用的参数&#xff1a; URL: http://api.openwe…...

vs调试引发了异常:读取访问权限冲突,argv是0x7

vs2019写了几句小代码&#xff0c;结果报错&#xff1a; 引发了异常:读取访问权限冲突,argv是0x7 查了一堆是什么数组越界了&#xff0c;空指针异常了啥的。 只好都注释掉只留下主函数&#xff0c;结果还是报错&#xff0c;定睛一看才发现原因&#xff1a;main函数忘写第一…...

【电影推荐系统】实时推荐

概览 技术方案&#xff1a; 日志采集服务&#xff1a;通过利用Flume-ng对业务平台中用户对于电影的一次评分行为进行采集&#xff0c;实时发送到Kafka集群。消息缓冲服务&#xff1a;项目采用Kafka作为流式数据的缓存组件&#xff0c;接受来自Flume的数据采集请求。并将数据推…...

Delphi 开发不一样的窗体标题栏:TTitleBarPanel

目录 TTitleBarPanel 的使用 TTitleBarPanel 的使用进阶 一、设置标题栏高度、颜色 二、个性化标题栏的关闭等按键 我们在用Delphi开发程序的时候&#xff0c;窗体的标题栏一般都是标准的windows标题栏&#xff0c;上面包括&#xff1a;程序图标、标题、最小化、最大化、关闭…...

Quartz中禁止并发机制源码级解析

文章目录 Quartz进行任务调度时通常会要求一个任务禁止并发执行&#xff0c;此时只需要在Job类上面添加一个注解DisallowConcurrentExecution即可。在保存到数据库里面时&#xff0c;对应QRTZ_JOB_DETAILS表中的IS_NONCONCURRENT字段的值为1&#xff08;true&#xff09;。那么…...

为什么从公有云迁移到私有云的越来越多?

随着云计算的快速发展&#xff0c;越来越多的组织开始考虑将其IT基础设施从公有云迁移到私有云。这种转变背后存在着一系列的原因和动机&#xff0c;下面我们将探讨一些常见的迁移原因。 首先&#xff0c;数据安全和隐私是许多组织选择私有云的主要原因之一。在公有云中&#…...

用shell实现MySQL分库分表操作

#!/bin/bash mysql_cmd-uroot -p123 #定义变量保存密码 exclude_dbinformation_schema|performance_schema|sys #数据库 bak_path/backup/db #备份路径 mysql ${mysql_cmd} -e show databases -N | egrep -v "${exclude_db}" > dbname while read line do …...

php 适配器模式

一&#xff0c;适配器模式&#xff0c;属于结构设计模式的一种&#xff0c;用于将一个类的接口转换成客户期望的接口。 1&#xff0c;目标接口&#xff08;Target Interface&#xff09;&#xff1a;是客户期望的接口&#xff0c;定义了客户要调用的方法。 2&#xff0c;适配器…...

Scratch Blocks自定义组件之「下拉图标」

一、背景 由于自带的下拉图标是给水平布局的block使用&#xff0c;放在垂直布局下显得别扭&#xff0c;而且下拉选择后回修改image字段的图片&#xff0c;这让我很不爽&#xff0c;所以在原来的基础上稍作修改&#xff0c;效果如下&#xff1a; 二、使用说明 &#xff08;1&am…...

Robot Framweork之UI自动化测试---分层设计

Robot Framework 的分层思想是一种测试设计和代码组织的模式&#xff0c;它将测试用例的实现和测试执行逻辑分离&#xff0c;以提高测试的可维护性、可读性和可扩展性。 一、分层思想 在实际项目中&#xff0c;一般分为三层&#xff1a;元素层&#xff0c;流程层&#xff0c;用…...

MySQL8.0/8.x更新用户密码命令

authentication_string 这是Mysql8.0新做出的修改&#xff0c;在旧版本中使用的是password()函数。 2&#xff0c;在网上找到的mysql忘记密码的解决方案中&#xff0c;大多会使用 UPDATE user SET authentication_string12345 WHERE userroot; 来直接将密码改成12345&#xff0…...

【MySQL】下载安装以及SQL介绍

1&#xff0c;数据库相关概念 以前我们做系统&#xff0c;数据持久化的存储采用的是文件存储。存储到文件中可以达到系统关闭数据不会丢失的效果&#xff0c;当然文件存储也有它的弊端。 假设在文件中存储以下的数据&#xff1a; 姓名 年龄 性别 住址 张三 23 男 北京…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...