Desarrollo de componentes de menú de selección múltiple de varios niveles en vue

Este ejemplo comparte el método de creación del componente de menú de selección multicapa multicheck de vue, a modo de referencia, el contenido específico es el siguiente

Para desarrollar un componente de menú de selección multicapa multicheck, la función es:

Hacer clic en el título padre puede abrir y plegar la lista inferior
Hacer clic en el icono de selección del título padre puede seleccionar todos los elementos de la lista inferior o cancelar todas las selecciones
Hacer clic en el icono de selección del título padre alcanza la selección completa, el icono de selección del título padre se selecciona automáticamente; de lo contrario, si no alcanza la selección completa, el icono de selección del título padre se deselecciona automáticamente
Cuando todos los iconos de selección del título padre alcanzan la selección completa, la casilla de selección inferior se selecciona automáticamente; de lo contrario, si no alcanza la selección completa, la casilla de selección inferior se deselecciona automáticamente
Hacer clic en la casilla de selección inferior puede seleccionar todos los iconos de selección o cancelar todas las selecciones

por lo tanto, resumiendo, lo que debemos enfocar esusando qué elementos han sido seleccionados en la lista inferior para calcularPara lograr lo anterior, el proceso de implementación es:

construir los datos de nivel model

datas: [
 {
 //usado para determinar si debe mostrarse la lista inferior
 isShowListItem: false,
 //usado para registrar qué subelementos han sido seleccionados
 selected: [],
 //título padre
 listTitle: "保利南悦湾",
 //lista inferior
 listItem: [
 {
 id: 1,
 name: "李小龙"
 },
 {
 id: 2,
 name: "周星驰"
 },
 {
 id: 3,
 name: "周杰伦"
 }
 ]
 },
 {
 isShowListItem: false,
 selected: [],
 listTitle: "南庄万科城",
 listItem: [
 {
 id: 4,
 name: "大魔王"
 },
 {
 id: 5,
 name: "老妖怪"
 }
 ]
 }
]

registra qué elementos han sido seleccionados en la lista inferior
La lista inferior mediante v-model = "data.selected" para realizar un enlace bidireccional al array selected, cuando cambia la selección del elemento de la lista inferior, se registra el id del elemento actual en el array selected.

<input 
type="checkbox"
:value = "item.id"
v-model = "data.selected"
>

Método de tratamiento cuando cambia la selección del título padre
Tratamiento automático del cambio del icono de selección del título padre
En HTML, al绑定:checked = "isTitleChecked(data)", en este momento, cada vez que cambia otro elemento, el título padre llama al método isTitleChecked para determinar si el estado de checked es true o false, logrando que el título padre cambie automáticamente según el número de elementos seleccionados de los hijos.
Al activar o desactivar el título superior mediante @change="changeTitleChecked(data,$event)", se activa cada vez que se activa o desactiva el título superior.
HTML del título superior

<input :id="data.listTitle"
 class="list-input"
 type="checkbox"
 :checked="isTitleChecked(data)"
 @change="changeTitleChecked(data,$event)"
>

JS del título superior

Método changeTitleChecked:Cuando se activa el icono de selección del título superior de manera activa, si el estado de checked de esta vez es true, se seleccionarán todos los elementos de la lista secundaria no seleccionados, es decir, se agregarán a todos ellos al array selected; si es false, se deseleccionarán todos los elementos de la lista secundaria, es decir, se vaciará el array selected.
Método isTitleChecked:Al seleccionar todos los elementos de la lista secundaria, seleccionar automáticamente el título superior.

/**
* Método de manejo de cambios en el estado del título superior
* @param data [datos del elemento actual]
* @param event [evento del elemento actual]
*/
changeTitleChecked : function (data,event) {
 if (event.target.checked === true) {
 data.listItem.forEach(function (item) {
 data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
 })
 }else {
 data.selected = [];
 }
}

/**
* Determinar el estado de selección del título superior
* @param data [datos del elemento actual]
* @returns {boolean}
*/
isTitleChecked : function (data) {
 var _selected = data.selected;
 var _listItem = data.listItem;
 // Verifica si selected contiene todos los ids de item. Si es así, el título debe estar seleccionado
 return _listItem.every(function (item) {
 return _selected.indexOf(item.id) != -1;
 });
}

Método de manejo de cambios en el cuadro de selección inferior
Manejo automático de los cambios en el cuadro de selección de todos inferior

HTML del cuadro de selección de todos:

<input id="all-checked"
 type="checkbox"
 :checked="isAllChecked()"
 @change="changeAllChecked($event)"
>

JS del cuadro de selección de todos:

Método changeAllChecked: Cuando se activa el cuadro de selección de todos de manera activa, si checked es true, se colocan todos los elementos secundarios en el array selected; de lo contrario, se vacía el array selected.
isAllChecked Método: determinar si la longitud del array selected es igual a la longitud de todos los subelementos, si es igual, configure el estado checked del cuadro de selección completo en true.

/**
* Método changeAllChecked: determinar si la longitud del array selected es igual a la longitud de todos los subelementos. Si es igual, configure el estado checked del cuadro de selección completo en true.
* @param event 
*/
changeAllChecked : function (event) {
 if (event.target.checked === true) {
 this.datas.forEach(function (data) {
 data.listItem.forEach(function (item) {
 data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
 })
 })
}else {
 this.datas.forEach(function (data) {
 data.selected = [];
 })
 }
}
/**
* Determinar el estado de selección del cuadro de selección completo
* @returns {boolean}
*/
isAllChecked : function () {
 devolver this.datas.every(function (data) {
 devolver data.selected.length === data.listItem.length;
 });
}

Este artículo ha sido organizado en el 'Tutorial de Aprendizaje de Componentes Frontend de Vue.js', bienvenidos a leer y aprender.

Sobre el tutorial de componentes de vue.js, por favor haga clic en el tutorial especial de componentes de vue.js para aprender.

Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos nos apoyen y aplaudamos el tutorial.

Declaración: El contenido de este artículo se obtiene de la red, pertenece al autor original, el contenido se contribuye y se carga por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar, y proporcione la evidencia relevante. Si se verifica, este sitio eliminará inmediatamente el contenido sospechoso de infracción.