Uso de selectores en cascada

El uso de selectores en cascada en element-ui, los selectores en cascada son principalmente adecuados para la selección de cuadros desplegables, y la frecuencia de uso es relativamente alta.

Primero encuentre el contenido del selector en cascada en element-ui

 Aquí, espero que se pueda seleccionar cada elemento, no solo se puede seleccionar la capa inferior, así que elija cualquier opción de un nivel.

desplegar eso es todo

 Echemos un vistazo a cómo se ve la demostración en el sitio web oficial

html:

<template>
  <div class="example-block">
    <span class="example-demonstration"
      >Select any level of options (Single selection)</span
    >
    <el-cascader :options="options" :props="props1" clearable />
  </div>
</template>

 guion:

const props1 = {
  checkStrictly: true,
}

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
]

Podemos ver que los requisitos de datos en el script son: relación jerárquica, la relación entre padre e hijo está asociada con los hijos , lo que requiere que el formato de código que se pasa del back-end al front-end también debe estar en el formato de los hijos .

 options es el elemento de datos correspondiente, y props1 es su opción de configuración

De acuerdo con el contenido de los accesorios, hablemos de estos dos atributos.

 etiqueta es el nombre correspondiente a cada selección mostrada en el selector en cascada, y valor puede entenderse como el valor correspondiente detrás del nombre.

caso:

Necesita agregar la información de un departamento, se requiere que se muestren todos los departamentos , pero se agrega el parentId del departamento principal , es decir, el campo enlazado es el campo del departamento principal, y el nombre de cada departamento es name , y el el valor de cada departamento es id .

Entonces el selector de cascada debe escribirse así

 <el-form-item label="上级部门" prop='id'>
             <div class="example-block">
               <el-cascader
                 :options="alldept"
                 :props="props"
                 v-model='form1.parentId'
               />
             </div>
      </el-form-item>

El contenido del enlace bidireccional v-model es parentId, que es el contenido del formulario de envío correspondiente, y options es el contenido correspondiente, aquí está alldept 

   const props = {
      expandTrigger: 'hover',
      label:'name',
      value:'id',
      emitPath:false,
      checkStrictly: true // 只选择选中的节点
      } 

Aquí el valor es la identificación del valor correspondiente, la etiqueta es el nombre del contenido mostrado y se pueden conocer otros documentos.

checkStrictly debe prestar atención, si tiene muchos niveles, si desea obtener el contenido del nodo que finalmente se selecciona y no se muestra el contenido de otros nodos, debe hacer checkStrictly: verdadero. De lo contrario, cuando los datos se transfieran en una etapa posterior, es posible que se produzca un error de formato de datos.