Procesamiento de matriz de código fuente de Vue

1. Primero obtenemos los datos de permiso devueltos por el backend, que se ve así.

2. Si desea renderizar la estructura de árbol del elemento, debe realizar una capa de procesamiento recursivo para formar una estructura de árbol. Esto también se puede hacer sin recursividad. Creo que pueden manejarlo con mapas de propiedades. El método específico es el siguiente:

Después de renderizar, estos datos se ven así, que es una estructura de datos que cumple con los requisitos de nuestro componente el-tree.

3. Ahora el administrador comienza a gestionar los permisos en la interfaz de gestión. Como se muestra en la figura:

En este caso, lo que se devuelve al backend es una matriz de identificación, datos=[1, 4, 10]. Estos son los datos que estás pasando al backend y es hora de reproducirlos.

4. Ahora el servidor le retroalimenta los datos y los devuelve en función de los datos que acaba de proporcionar. Luego agregue el atributo de verificación, que también es su acuerdo. Los datos probablemente se verán así:

Es posible que todavía esté pensando, bien, bien. Sin recursividad, el bucle obtendrá los datos. Cuando obtiene una lista de árboles de matrices que consta de todos los datos cuyas matrices se comprueban como verdaderas, entonces esto. $referencias. Árbol. Si setCheckedKeys (this.Treelist) sube, no cumple con los requisitos, porque se seleccionarán todos los padres y todos los subconjuntos. Se verá así:

5. Esto definitivamente no funcionará. Necesitamos procesar los datos nuevamente para que cumplan. 1. ¿Deberíamos convertir los datos de forma recursiva en una estructura de árbol, o utilizar el método anterior para convertir los datos de forma recursiva en una estructura de árbol? 2. Recorra la estructura de árbol y determine si todos los subconjuntos del conjunto principal son verdaderos. De lo contrario, establezca su atributo de verificación en falso.

Explícalo aquí. Debe configurar esta variable .state usted mismo o una variable global. De todos modos, si desea configurarlo, configúrelo como verdadero. Primero, colocamos la estructura de árbol recursiva en la función traveData. Esta función pasará nuestros datos de forma recursiva, principalmente para juzgar.

item. check = item. Si no, está bien, entonces el valor del cheque es razonable. Si tiene un subconjunto pero su verificación es verdadera, es muy irrazonable, porque no sabemos si todos sus subconjuntos están seleccionados, es decir, la verificación es verdadera, por lo que necesitamos hacer una capa de interrupción para juzgar su Si todos los subconjuntos son verdaderos, siempre que uno de sus subconjuntos no lo sea. Entonces esto no puede ser verdad. Obtenga el estado secundario (items.children), así que aquí hay otra capa, iterando sobre todos sus subconjuntos. Determinar el valor del cheque. Bien, ya casi hemos terminado. Para obtener el valor de los datos devueltos, tenemos que recurrir a los datos.

Hasta ahora, tenemos el valor de this.treelist. Sólo necesitamos

para que nuestra estructura de árbol pueda volver a renderizarse. Todos los datos son datos simulados, pero no son muy diferentes de los datos en escenarios comerciales. Simplemente sigue este proceso y estarás bien. Ya sea element o antd, creo que la sensación de seleccionar todo y la mitad se puede optimizar. De hecho, no es un desvío.