La actualización de la tabla de elementos está bloqueada
Se me ocurren dos formas de resolver este problema:
Una: paginación, dejar que el backend agregue una consulta de paginación para mostrar la cantidad de nodos y la cantidad de datos estadísticos. entradas. (Pero la demanda real es menor y las tablas de árbol generalmente no tienen paginación).
Dos: solicitar una copia de seguridad de los datos de la matriz del árbol (tableDataCopy). Durante la inicialización, solo se mostrarán los datos de la capa especificada (como la primera capa del árbol) y todos los nodos secundarios debajo de ella. La primera capa se establecerá en vacía, registrará los nodos con nodos secundarios y establecerá el estado de hasChild para determinar si hay nodos secundarios. De esta manera, no todos los datos se muestran cuando se inicializa la página, lo que permite la carga bajo demanda.
Lo anterior solo puede satisfacer la función de visualización. Cuando hay operaciones como mover nodos hacia arriba y hacia abajo/eliminar/editar, etc., los nodos mostrados no se pueden actualizar sincrónicamente (porque los datos de respaldo no pueden ser dos). -vía datos enlazados). Método de procesamiento: actualice el nodo (dos métodos, el primero se implementa usando render (), el segundo es vincular la clave a la tabla (usando el algoritmo diff), siempre que se manipulen los datos y se cambie la clave, el El nodo se puede actualizar).
El código para solicitar datos y expansión es el siguiente:
// Obtener la lista del árbol
getList(active) {
this.loading = true;
let data = Object.assign({}, this.searchForm);
API.getDepartmentListAll(data)
.luego ((res ) =gt; {
// this.tableData = res.data;
this.expandRow.push(res.data [0].id); // De forma predeterminada Expandir
this.tableDataCopy = res.data [] // Realizar una copia de seguridad de los datos completos
if (active) { // Estos son los datos en los que se hace clic en el botón de operación
this.tableData = this.commonJava.data; this.tableDatas = JSON.parse(JSON.stringify(res.data.children)).map(item =gt; { // Mostrar datos
// hasChildren indica que es necesario mostrar el icono de flecha
item.length gt 0
// Solo se muestra una capa o los hijos en el árbol. prop se configuran como otro campo
item.children = null
// Recuerda la jerarquía
item.idList = [item.id]
devolver artículo
})
resolver(this.tableDatas)
})
},
Copiar después de iniciar sesión
Cuando hay un botón de operación y los datos se actualizan, después de actualizar el nodo con la clave anterior, el estado de la extensión se inicializará al estado de la página de progreso inicial. y no podrá permanecer en el nodo de la operación.
Solución: puede utilizar el método findParentNode para consultar recursivamente todos los ID de nodo ancestro del nodo y registrarlos cuando se hace clic en el botón de operación (expandRow, esta variable también son los datos de expansión predeterminados de la tabla de árbol: expandir-fila-claves) Y luego, cuando solicita una actualización Al recopilar datos, puede procesar de forma recursiva los datos que se expandirán a través del método mapNewTableData () Durante el procesamiento recursivo, se mostrarán y procesarán los nodos secundarios correspondientes con la identificación del nodo ancestro correspondiente, y otros. Los nodos o la misma configuración estarán vacíos.
El código es el siguiente:
/**
*
* @param recursivo, la matriz de identificadores del nodo ancestro del nodo actual (incluido él mismo)
* aceptar datos de estructura de árbol de UnitNodes, identificadores del nodo actual
*/
findParentNode(acceptUnitNodes, ids) {
var parentNodes = [] // Todos los nodos principales
var forfun = function(id, nodes) {
for (var i = 0; i lt; nodes.length; i) {
var currentNode = nodos[i]
if (currentNode.id === id) {
return currentNode.id
} else if (currentNode. Children) {
var validNodeId = forfun(id, currentNode.children)
if ( validNodeId amp; amp; parentNodes.indexOf(validNodeId) lt; 0) {
parentNodes.push(validNodeId)
}
if (validNodeId) {
return currentNode.id
}
}
}
}
var validNodeId = forfun(ids, AcceptUnitNodes)
si (validNodeId amp; amp; parentNodes.indexOf(validNodeId) lt; 0) {
parentNodes.push(validNodeId)
}
Devolver parentNodes
},
// Procesa datos de forma recursiva y, cuando hay registros extendidos, muestra los subnodos de datos con registros extendidos
mapNewTableData(data, pidArr) {
let dataNew = JSON.parse(JSON.stringify(data));
function mapNewArr(dataNew, pidArr) {
dataNew.map(item =gt ; {
if (pidArr.indexOf(item.id) === -1) {
item.idList = [item.id ]
elemento; .hasChildren = true
item.children = null
// Recuerda la jerarquía
return item
} else {
mapNewArr(item.children, pidArr)
}
})
devolver datos
Nuevo;
}
mapNewArr(dataNew, pidArr);
return mapNewArr(dataNew, pidArr);
},
Copiar después de iniciar sesión
Botón de acción:
//upDown//down
upDownLayer(índice, fila, tipo) {
p>
this.expandRow = (this.commonJs. findParentNode(this.tableDataCopy, row.id)).splice(1); // Ajusta la herramienta para obtener la matriz de identificación del nodo ancestro después del Se hace clic en el nodo actual.
let carga = Loading.service({
destino: document.querySelector(".tableBox"),
});