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

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

需求简介

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

问题记录

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

      <el-cascader         v-if="cascaderShow"        v-model="cascaderValue"        :options="list"         :props="{          multiple: true,           emitPath: false,          checkStrictly: true        }"         ref="cascader"        :size="size"       >      </el-cascader>      <span class="title">最近使用 </span>      <div class="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，还需要加入强制渲染，具体如下： 设置组件内部值

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();

完美解决。