解决vue+el-element二级联动，选项选择后不显示的问题

一、问题描述

        vue的二级联动可以采用v-if的方式去实现，也就是在第一级选项的值发生变化后，清空第二级选项所关联的model的值，并将第二级选项所取的变量数组变更。会产生的问题是，第二级选项的值有时候会出现值已改变但是页面上并不显示改变值的情况。

 

二、跟踪问题

        产生问题的原因为vue是基于数据驱动的，这么做有可能会导致数据刷新不及时。如果要测试去跟踪问题的原因，可以在第二级的el-select中写上@change方法，可以看到当改变选项值后，该el-select的value是发生变化了，但是在页面中无法显示。

 

三、解决方式

       给第二级el-select的@change关联方法中加入一行代码，以下为伪代码：

<el-select v-model="status" clearable @change="updateFun">
</el-select>

updateFun() {
   this.$forceUpdate();
}

       这样，在每次更改第二级选项的值后，调用方法，执行“this.$forceUpdate();”即可