The elementui cascade selector setting is not optional and updated in time

First of all, my requirement is that the cascade selector can only select up to 3 values. If 3 values are selected, all of them will be disabled (except the ones already selected), because the subsequent selection needs to be deselected. After deselection, the previously unselectable items become optional.

Then I found that directly setting the disabled value and printing it on the console has indeed set it to be unavailable, but the update of the cascade selector is not synchronized.

Found a method on the Internet:

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

Then reset the cascaderKey every time it is updated. ,

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

It is indeed possible to update the view, but the drop-down box of the selector will disappear every time it is updated, and it needs to be reopened and re-selected. And it is easy to have some strange problems. For example, I encountered a problem today: for example, first select China’s GDP, per capita GDP and urbanization rate, and then cancel the selection of urbanization rate and per capita GDP. When the per capita GDP is selected again, the handleChange event will not be triggered. The view must be updated again, which is a poor experience for the user.

But in fact, the solution is also very simple, which is to directly use the $set method of vue . Using this method can not only update the view in time, but also avoid the strange problems before.

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

In the final analysis, I still need to have a clear grasp of some details of vue. If I can think earlier that I may not be able to monitor the changes of the array, maybe this problem will not bother me for so long.

The elementui cascade selector setting is not optional and updated in time

Guess you like