Use el-table para realizar la carga diferida de los datos del árbol, haga clic en la fila para expandir, muestre solo una pieza de datos (categoría grande) a la vez y personalice el valor total de la tabla

1. Use el-table para implementar la carga diferida de datos de árbol

1. Lograr los requisitos previos:

• 1. perezoso
• 2. :cargar=“cargarNodo”
• 3. :tree-props=“{ hijos: 'hijos', tieneHijos: 'tieneHijos' }”

Nota: especialmente para el elemento 3, se le debe pasar la interfaz de back-end "hasChildren" (el nombre puede ser diferente), el valor es verdadero o falso, si el valor del nodo raíz es verdadero, el valor del nodo secundario es falso, de lo contrario, el pequeño junto a los datos El triángulo no se mostrará, es decir, los datos del nodo secundario no se pueden obtener

2. El código de implementación es el siguiente:

<el-table
lazy
:load="loadNode"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"

// 点击小三角执行的方法
const loadNode = (row: {
     
      [key: string]: any }, treeNode: any, resolve: any) => {
    
    
	if (row.level >= 1) {
    
    
		state.tableData.param.level = row.level + 1;  //后端要求传参变化
		state.tableData.param.code = row.code;
		Query(state.tableData.param).then((response: Array<{
     
      [key: string]: any }>) => {
    
    
			resolve(response);
		});
	}
};
>

2. Haga clic en la fila para expandir

1. Es necesario hacer clic en la fila actual para expandir los datos (antes, haga clic en el triángulo pequeño para expandir)
2. el código se muestra a continuación:

// 使用点击事件
@row-click="getOpenDetail"

// 点击当前行展开节点
const getOpenDetail = (row: any, column: any, e: any) => {
    
    
	if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName == 'DIV') {
    
    
		e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click();
	} else {
    
    
		e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click();
	}
};

3. Solo se muestra un dato a la vez

1. Cuando se requiere hacer clic en el nodo raíz, no se expanden otros nodos raíz, solo se expanden el nodo raíz actual y sus nodos secundarios correspondientes
2. el código se muestra a continuación:

// 需要用到以下代码，其中 code 为数据唯一标识，与 id 作用一样
row-key="code"
:expand-row-keys="expands"
@expand-change="expandSelect"

// 每次只展开一行
const expandSelect = (row: {
     
      [key: string]: any }, expanded: boolean) => {
    
    
	if (expanded) {
    
    
		expands.value = [];
		if (row) {
    
    
			expands.value.push(row.code, row.code.substring(0, 2), row.code.substring(0, 4), row.code.substring(0, 6)); // 每次push进去的是每行的code和父元素的code
		}
	} else {
    
    
		expands.value = []; // 默认不展开
	}
};

3. Los datos de fondo son los siguientes:
   

Los datos del nodo raíz son los primeros dos dígitos del código, y los datos de los nodos secundarios posteriores se agregarán con dos dígitos en secuencia

4. Valor total de la tabla personalizada

1. Es necesario mostrar el valor total de los datos en la última fila de la tabla. Debido a que son datos cargados de forma diferida, el valor total no se puede acumular ni mostrar automáticamente. El front-end debe asignar el valor por sí mismo.
2. el código se muestra a continuación:

show-summary
:summary-method="getSummaries"

// 自定义表尾合计行
const getSummaries = (param: any) => {
    
    
	const {
    
     columns, data } = param;
	const sums: string[] = [];
	columns.forEach((column: any, index: number) => {
    
    
		switch (index) {
    
    
			case 0:
				sums[index] = '合 计';
				break;
			case 2:
				sums[index] = state.array.allDutyCost;// state.array.allDutyCos 为后端返回已经计算好的总数值
				break;
			case 3:
				sums[index] = state.array.allBudgetCost;
				break;
			case 4:
				sums[index] = state.array.allAdjustCost;
				break;
			default:
				sums[index] = '——';
		}
	});

Si hay errores o cosas que no entiendes en el texto, ¡puedes dejar un mensaje para discutir juntos!