Use el-table to realize lazy loading of tree data, click on row to expand, display only one piece of data (big category) at a time, and customize the total value of the table

1. Use el-table to implement lazy loading of tree data

1. Achieving prerequisites:

• 1. lazy
• 2. :load=“loadNode”
• 3. :tree-props=“{ children: ‘children’, hasChildren: ‘hasChildren’ }”

Note: Especially for item 3, the backend interface must be passed to you "hasChildren" (the name can be different), the value is true or false, if the root node value is true, the child node value is false, otherwise the small next to the data The triangle will not be displayed, that is, the child node data cannot be obtained

2. The implementation code is as follows:

<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. Click on the row to expand

1. It is required to click the current row to expand the data (before, click the small triangle to expand)
2. code show as below:

// 使用点击事件
@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. Only one piece of data is displayed at a time

1. When the root node is required to be clicked, other root nodes are not expanded, only the current root node and its corresponding child nodes are expanded
2. code show as below:

// 需要用到以下代码，其中 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. The background data is as follows:
   

The data of the root node is the first two digits of the code, and the data of subsequent child nodes will be added with two digits in sequence

4. Custom table total value

1. It is required to display the total value of the data in the last row of the table. Because it is lazy loaded data, the total value cannot be automatically accumulated and displayed. The front end needs to assign the value by itself
2. code show as below:

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] = '——';
		}
	});

If there are mistakes or things you don’t understand in the text, you can leave a message to discuss together!