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的问题了。

// Dialog
@opened="opened"

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

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

到此这篇关于Vue3中无法为el-tree-select设置反选问题分析的文章就介绍到这了,更多相关Vue3 无法为el-tree-select内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！