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，还需要加入强制渲染，具体如下：

1. 设置组件内部值

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

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

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

3. 触发标签计算

this.$refs.cascader.computePresentContent();

4. 强制刷新

this.$forceUpdate();

完美解决。