selector en cascada elementUI Haga clic en el texto de la etiqueta para seleccionar y cerrar el menú después de la selección

        El selector en cascada de elementUI, en el modo de selección única de cualquier opción de primer nivel, debe hacer clic en el círculo en la opción para seleccionar el elemento, y el menú no colapsará automáticamente después de la selección, debe hacer clic en el código fuera de la caída -abajo caja para colapsar.

         En el desarrollo real, para considerar la simplicidad de las operaciones del usuario, si desea hacer clic en el contenido de texto de la etiqueta, puede seleccionar directamente el elemento y el menú se colapsará después de la selección.

1 Haga clic en el contenido del texto de la etiqueta para seleccionar la opción

html:

<el-cascader
    ref="elcascader"
    :options="options"
    :props="{ checkStrictly: true }"
    v-model="value"
    clearable
    @visible-change="elCascaderOnClick"
    @expand-change="elCascaderOnClick">
</el-cascader>

t: 

 elCascaderOnClick() {
    setTimeout(() => {
      document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
        (el as any).onclick = function () {
          this.previousElementSibling.click();
        };
      });
    }, 100);
  }

2 Contraer el menú después de la selección

        Escuche los cambios en el valor de enlace del selector y contraiga el menú desplegable cuando cambie el valor seleccionado.

@Watch("value") 
onValueChange() {
    if(this.$refs.elcascader){
        this.$refs.elcascader.dropDownVisible = false;
    }
}

Supongo que te gusta

Origin blog.csdn.net/weixin_58328414/article/details/130130190
Recomendado
Clasificación