【前端疑难杂症bug——el-cascader手动设置值、页面不回显bug】
Leslie_you 2024-10-27 08:33:02 阅读 56
el-cascader手动设置值、页面不回显bug
需求简介
使用el-cascader级联选择器，选择器之外有快速选择的功能
问题记录
当我使用了element样式框架中的级联、el-cascader的组件,绑定了cascaderValue时，这个数组是记录选择的叶子id。
我在级联选择器外边会有一个快捷选中叶子的标签，点击直接选中这个叶子。但是无论你怎么设置cascaderValue,他都无法在级联器中回显对应的叶子，也无法在组件中查看选中的标签展示，只是打开的时候会有颜色变化，并没有选中。
框架也没有对这个需求做明确解决方案，例如刷新渲染组件。
v-if="cascaderShow"code>
v-model="cascaderValue"code>
:options="list" code>
:props="{
multiple: true,
emitPath: false,
checkStrictly: true
}" code>
ref="cascader"code>
:size="size" code>
>
</el-cascader>
<span class="title">最近使用 </span>code>
<div class="recent-item" @click="(item)=>cascaderValue.push(item)" v-for="(item, index) in recentList" :key="index">{ { item.name }}</div>code>
</div>
解决方法
方案1
简单粗暴，将组件重新渲染，但是体验效果不好，用户会感知到页面的抖动
this.cascaderShow = false;
setTimeout(() => {
this.cascaderShow = true;
}, 0);
方案2（个人认为目前达成的最优方案）
查看了源码，手动设置的cascaderValue，代码中虽然能够选中对应节点，但是页面不会变化，因为需要点击elcheckbox才会触发内部的check属性为true。手动设置elcheckbox，还需要加入强制渲染，具体如下：
设置组件内部值
this.$refs.cascader.checkedValue = this.cascaderValue;
手动设置节点数据的属性check
(this.$refs.cascader.$refs.panel.checkedNodePaths || []).forEach(item => {
this.$set(item[item.length - 1], 'checked', true);
});
触发标签计算
this.$refs.cascader.computePresentContent();
强制刷新
this.$forceUpdate();
完美解决。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。