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
:default-expanded-keys="['xxxxxxxx']"
/>
</template>
然后发现不生效,周五的时候也能猜到原因,data绑定的pinia全局状态里的值,组件被实例化时这个值可能还未被加载,所以设置default-expanded-keys时它就找不到节点数据,等组件被创建后,data有值了,但是default-expanded-keys又不会再重新设置了,就造成组件有下拉数据,但是没有反选效果。
起初以为是个简单问题,于是动了动脑子,既然和顺序有关,那自然考虑到生命周期了,于是在setting.vue里加上onMounted,并在这里重新赋值:
<template>
<el-tree-select
: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设置反选问题分析的更多相关文章
- vue中select设置默认选中
vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...
- EL表达式 JSTL中的常用EL函数 动态数据的国际化
ELppt: EL 全名为Expression Language.EL主要作用: 获取数据: •EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数据.( ...
- Go基础系列:为select设置超时时间
Go channel系列: channel入门 为select设置超时时间 nil channel用法示例 双层channel用法示例 指定goroutine的执行顺序 After() 谁也无法保证某 ...
- LoadRunner中Action的迭代次数的设置和运行场景中设置
LoadRunner中Action的迭代次数的设置和运行场景中设置 LoadRunner是怎么重复迭代和怎么增加并发运行的呢? 另外,在参数化时,对于一次压力测试中均只能用一次的资源应该怎么参数化呢? ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- 端午总结Vue3中computed和watch的使用
1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...
- 在vue3中使用router-link-active遇到的坑
在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由 ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- Html中<a>标签的样式的设置
html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...
随机推荐
- 复习笔记,javadoc生成文档总结
1.处理数字时候的内存溢出问题 //在处理大数字时候注意内存溢出问题 int i=10_0000_0000; //jdk7 中数字之间可以加入下划线不影响输出 ...
- Oracle “ORA-12154: TNS: 无法解析指定的连接标识符”错误------网络摘录
相信使用过Oracle数据库的人一定碰到过"ORA-12154: TNS: 无法解析指定的连接标识符"错误,我在此做一个小小的总结. 在程序中连接Oracle数据库的方式与其他常用 ...
- C语言初级阶段7——指针2——特殊指针
C语言初级阶段7--指针2--特殊指针 指针函数:是一个函数,返回值类型是一个指针. #include<stdio.h> int* fun() { //a是一个局部变量 int a = 1 ...
- 【原创】SeetaFace2 Android编译
SeetaFace2 github上有很完整的编译说明,但是自己编译过程中还是遇到了一点小问题.记录一下 编译环境: wsl ubuntu 20.04 执行编译命令 cmake .. -DCMAKE_ ...
- MATLAB画图自动确定坐标范围(GUI)
今天在用MATLAB做我的毕设的时候碰到一个很纠结的问题,之所以说纠结是因为我觉得这个问题很简单,可是一时半会就是弄不出来(ー`´ー).鼓捣了半个小时左右吧,终于搞出来了.下面做个纪念: 问题描述 在 ...
- 初学,Markdown的使用
Markdown学习 一级标题:"#"+空格+"标题" 二级标题 二级标题:"##"+空格+"标题" 三级标题 三级标题 ...
- Matlab %陆
第六章 MATLAB IN ENGINEERING Polynomial Differentiation多项式微分 %幂级数 f(x) = x^3-2x-5; p = [1 0 -2 -5] %自 ...
- 总结Unity查找物体的几种方法
Unity中经常需要查找对象,对应的API也有好几种,各自有不同的适用场合. 1. GameObject.Find 通过名字或路径查找游戏对象. GameObject.Find("GameO ...
- C语言基础题 22年5月
(十六进制 %x 20.0f是%f long 是%ld unsigned int %#o ) 编程题: 整数浮点数的上溢下溢 strcpy函数代码 int search(char *s, ch ...
- curl解决乱码
mb_convert_encoding($str, 'UTF-8', 'UTF-8,GBK,GB2312,BIG5');