gpt4 book ai didi

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

转载 作者:我是一只小鸟 更新时间:2023-04-10 22:32:07 30 4
gpt4 key购买 nike

  好久没有写博客了,刚好上周遇到一个难缠问题,这里记录一下.

  环境: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设置反选问题分析的文章就讲到这里了,如果你想了解更多关于Vue3中无法为el-tree-select设置反选问题分析的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com