网站备案之前需要建好网站吗,在线制作钓鱼网站源码,免费推广网站推荐,诺基亚官方网站环境#xff1a;Vue3.2、Element Plus 问题#xff1a;子组件 setting.vue 弹窗组件 Dialog 树选择组件el-tree-select #xff0c;无法设置默认选中项 default-checked-keys 场景#xff1a;在一个后台系统的列表页#xff0c;选中一行数据#xff0c;点击设置… 环境Vue3.2、Element Plus 问题子组件 setting.vue 弹窗组件 Dialog 树选择组件el-tree-select 无法设置默认选中项 default-checked-keys 场景在一个后台系统的列表页选中一行数据点击设置按钮分配一些功能。这里的做法是把设置页封装在一个子组件里了并且子组件里使用了Element Plus的Dialog组件 然后Dialog里有个el-tree-select需要初始化赋值因为在分配之前可能之前分配过需要设置反选 最开始是直接写死如下 templateel-tree-select :datastore().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 refstring[]([])
onMounted(() { list.value store().UserMenus selectArr.value [xxxxxxxx]
}) // setting.vue
templateel-tree-select :datalist :default-expanded-keysselectArr /
/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-modeldialogVisible绑定的变量控制显示隐藏初始化值为false也是导致失效的一个原因如我初始时设置dialogVisible.value true 那么反选是OK的只不过我依然不可能设置为true哪有弹窗一开始就显示的。 周五下午基本卡在这个地方了经过周末的放空自我峡谷Timi周一早上上班的路上复盘了一下考虑从Dialog本身寻找答案嘿果不其然它的API里有个opened方法Dialog 打开动画结束时的回调我在这里做初始化问题就解决了 // Dialog
openedopened// script ts
const opened () {selectArr.value [xxxxxxxx]
} 之所以能找到这个思路还有一个原因是也试了一下表单之前表单的提交事件里一直可以获取到表单对象然后试了一下onMounted里能不能获取到结果也是类似的情况。放个按钮在按钮的点击事件里是可以获取到组件的因为等你可以点击按钮时页面什么东西都加载完毕了同样的Dialog 打开动画结束时的回调里页面肯定早加载完毕了该有的值都有了那么这个时候做初始化就不会存在找不到key的问题了。 这个问题看似简单最后opened方法搞定了但实际很考验Vue的功底什么时候组件被创建什么时候数据被加载每个属性之间数据的联动以及先后顺序如果你写个固定值放在data和keys那里肯定没这个问题Element Plus官方文档大把的案例拿过来直接就有效果但是呢实际的项目开发中经常是多个技术点综合在一起你基本不可能把一个下拉框的值写死了也许你和我一样从pinia里取的值也许你通过axios读的数据也许是别的路子但是多少会遇到一些和预期不符的时候因此这里以这个案例分享一下自己也做个记录如果有人遇到了类似的问题可以参考一二有更好的方案也可以提出来一起交流交流。
