【前端疑难杂症bug——el-cascader手动设置值、页面不回显bug】

el-cascader手动设置值、页面不回显bug

需求简介

使用el-cascader级联选择器，选择器之外有快速选择的功能

问题记录

当我使用了element样式框架中的级联、el-cascader的组件,绑定了cascaderValue时，这个数组是记录选择的叶子id。
我在级联选择器外边会有一个快捷选中叶子的标签，点击直接选中这个叶子。但是无论你怎么设置cascaderValue,他都无法在级联器中回显对应的叶子，也无法在组件中查看选中的标签展示，只是打开的时候会有颜色变化，并没有选中。
框架也没有对这个需求做明确解决方案，例如刷新渲染组件。

<el-cascaderv-if="cascaderShow"v-model="cascaderValue":options="list":props="{
          multiple: true, 
          emitPath: false,
          checkStrictly: true
        }"ref="cascader":size="size"></el-cascader><spanclass="title">最近使用 </span><divclass="recent-item"@click="(item)=>cascaderValue.push(item)"v-for="(item, index) in recentList":key="index">{{ item.name }}</div></div>

解决方法

• 方案1 简单粗暴，将组件重新渲染，但是体验效果不好，用户会感知到页面的抖动

this.cascaderShow =false;setTimeout(()=>{this.cascaderShow =true;},0);

• 方案2（个人认为目前达成的最优方案） 查看了源码，手动设置的cascaderValue，代码中虽然能够选中对应节点，但是页面不会变化，因为需要点击elcheckbox才会触发内部的check属性为true。手动设置elcheckbox，还需要加入强制渲染，具体如下：

1. 设置组件内部值

this.$refs.cascader.checkedValue = this.cascaderValue;

1. 手动设置节点数据的属性check

(this.$refs.cascader.$refs.panel.checkedNodePaths || []).forEach(item => {
          this.$set(item[item.length - 1], 'checked', true);
        });

1. 触发标签计算

this.$refs.cascader.computePresentContent();

1. 强制刷新

this.$forceUpdate();

完美解决。