elementui级联选择器设置不可选且及时更新

首先我的需求是级联选择器最多只能选择3个值，如果选了3个就让所有的全部禁用(除了已经选择的)，因为后续需要取消选择。而取消选择后之前不可选的就变成可选。

然后就发现，直接设置disabled值然后在控制台打印，确实已经设置了不可选，但是级联选择器的更新不同步。

在网上发现了一个方法：

<el-cascader
          ref="cascaderItem"
          :options="options"
          :props="props"
          collapse-tags
          @change="handleChange"
          :key="cascaderKey"    // 就是这个cascaderKey
          :value="value"
></el-cascader>

然后每次更新的时候重置一下这个cascaderKey。、

let obj = this.$refs["cascaderItem"].getCheckedNodes();
// 遍历已选择节点，保证其可以取消选择
for (let chooseNode of obj) {
    chooseNode.data.disabled = false;
    this.cascaderKey = Math.random();
}

也确实能实现视图的更新，但是每次更新的时候选择器的下拉框就会消失，需要重新打开再重新选择。而且很容易出现一些奇奇怪怪的问题。比如我今天就遇到一个问题：比如先选择中国的GDP、人均GDP和城镇化率，然后取消选择城镇化率和人均GDP，当再次选中人均GDP的时候，handleChange事件不会触发。必须再次更新视图，这样给用户的体验感就很差了。

但是其实解决方法也很简单，就是直接利用vue的$set方法，使用这种方法不仅可以让视图进行及时的更新，也不会出现之前的奇奇怪怪的问题。

// 遍历已选择节点，保证其可以取消选择
for (let chooseNode of obj) {
    this.$set(chooseNode.data,"disabled",false)
}

归根结底还是要对vue的一些细节掌握清楚一些，如果能早点想到可能是无法监听数组的改变也许这个问题就不会困扰我这么久了。