1. 使用 el-table 实现树形数据懒加载

1. 实现必需条件：

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

注意：特别是第3条，后端接口必须传给你"hasChildren"(名字可以不一样)，值为 true或false，如果是根节点值为true，子节点值为false，不然数据旁边的小三角不会显示，即不能获取子节点数据

2. 实现代码如下：

<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. 点击行展开

1. 要求点击当前行也可以展开数据（之前是点击小三角才能展开）
2. 代码如下：

// 使用点击事件
@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. 每次只展示一条数据

1. 要求点击根节点时，其余根结点不展开，只展开当前根节点及其对应的子节点
2. 代码如下：

// 需要用到以下代码，其中 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. 后台数据如下：
   

根节点数据为code前两位数，以后的子节点数据依次加两位数

4. 自定义表格合计值

1. 要求在表格的最后一行显示数据的合计值，因为是懒加载的数据，不能自动累加显示出合计值，前端需要自己赋值
2. 代码如下：

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

文中有错误或不懂的地方，可以留言一起讨论！