La configuración del selector de cascada elementui no es opcional y se actualiza a tiempo

En primer lugar, mi requisito es que el selector en cascada solo pueda seleccionar hasta 3 valores, si se seleccionan 3 valores, todos estarán deshabilitados (excepto los ya seleccionados), porque la selección posterior debe ser deseleccionada. Después de la deselección, los elementos que antes no se podían seleccionar se vuelven opcionales.

Luego descubrí que configurar directamente el valor deshabilitado e imprimirlo en la consola lo ha configurado para que no esté disponible, pero la actualización del selector en cascada no está sincronizada.

Encontré un método en Internet:

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

Luego reinicie la cascaderKey cada vez que se actualice. ,

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

De hecho, es posible actualizar la vista, pero el cuadro desplegable del selector desaparecerá cada vez que se actualice, y debe volver a abrirse y seleccionarse nuevamente. Y es fácil tener algunos problemas extraños. Por ejemplo, encontré un problema hoy: por ejemplo, primero seleccione el PIB, el PIB per cápita y la tasa de urbanización de China, y luego cancele la selección de la tasa de urbanización y el PIB per cápita. Cuando se seleccione nuevamente el PIB per cápita, el evento handleChange no ser activado. La vista debe actualizarse nuevamente, lo que es una mala experiencia para el usuario.

Pero, de hecho, la solución también es muy simple, que es usar directamente el método $set de vue .Usar este método no solo puede actualizar la vista a tiempo, sino también evitar los problemas extraños anteriores.

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

En el análisis final, todavía necesito tener una comprensión clara de algunos detalles de Vue. Si puedo pensar antes que es posible que no pueda monitorear los cambios de la matriz, tal vez este problema no me moleste por tanto tiempo.