lazy
:load=“l(fā)oad”
:tree-props=“{children: ‘children', hasChildren: ‘hasChildren'}”

// 模板
<el-table 
  	  row-key="planId" 
	  ref="table" 
	  :data="tableData" 
	  lazy
	  :load="load"
	  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
	  @selection-change="selectionChange" 
	>
	<el-table-column type="selection" align="center" />
    <el-table-column label="檢查明細" prop="inspectDetails" />
</table>

// 數(shù)據(jù)
data: () => ({ tableData: [], list: [], ids: []}),
//方法
mounted() {
	this.search()
}
// 獲取數(shù)據(jù)
async search() {
	// 這兒是將懶加載數(shù)據(jù)清除，防止調(diào)用方法出現(xiàn)頁面不更新的情況
	this.$set(this.$refs.table.store.states, "lazyTreeNodeMap", {});
	this.$set(this.$refs.table.store.states, "treeData", {});
	const { rows } = await API_APPRAISE.APR_EXE_OS_R({
		projectId: this.$route.query.id,
	});
	// 我這塊是將數(shù)據(jù)需要分組，進行了分組 ，不需要的可以跳過這兒，比如從后端獲取到的直接是樹形數(shù)據(jù) 就可以是
	// this.list = rows
	// this.tableData = JSON.parse(JSON.stringify(this.list)).map(item => ({
		// ..item,
		// hasChildren: item.children && item.children.length > 0,
		// children: null,
		// idList: [item.planId],
	// }))
	let group = this.groupBy(rows, 'testOrgan');
	// 備份數(shù)據(jù)，全部數(shù)據(jù)
	this.list = group.map(item => ({
		id: item.id,
		planId: item.id,
		children: this.handleTree(item.children)
	}));
	// 展示數(shù)據(jù)
	this.tableData = JSON.parse(JSON.stringify(this.list)).map(item => ({
		...item,
		// 這兒的ids 是每個節(jié)點的所有子節(jié)點及自己節(jié)點的planId, 我后續(xù)需要將它傳到后端處理，不需要可以刪除
		ids: this.getTreeNodes(item),
		// hasChildren 表示需要展示一個箭頭圖標
		hasChildren: item.children && item.children.length > 0,
		// 只展示一層
		children: null,
		// 記住層級關(guān)系
		idList: [item.planId],
	}))
},
// 分組函數(shù)
groupBy(array, key) {
	const groupedData = new Map();
	for (const item of array) {
		const group = item[key];
		if (!groupedData.has(group)) {
			groupedData.set(group, []);
		}
		groupedData.get(group).push(item);
	}
	return Array.from(groupedData, ([id, children]) => ({
		id, children
	}));
},
// 懶加載方法， 在點擊下拉時會調(diào)用
load (tree, treeNode, resolve) {
	// 層級關(guān)系備份
	const idCopy = JSON.parse(JSON.stringify(tree.idList))
	// 查找下一層數(shù)據(jù)
	let resolveArr = this.list
	for (const planId of tree.idList) {
		const tarItem = resolveArr.find((item) => item.planId === planId);
		if (!tarItem) break;
		resolveArr = tarItem.children || [];
	}
	// 處理下一層數(shù)據(jù)的屬性
	resolveArr = JSON.parse(JSON.stringify(resolveArr))
	resolveArr.forEach(item => {
		item.ids = this.getTreeNodes(item)
		item.hasChildren = item.children && item.children.length > 0
		item.children = null
		item.idList = [...idCopy, item.planId]
	})
	// 渲染子節(jié)點
	resolve(resolveArr)
	// 如果需要勾選 那么需要將每一個children重新掛載回去，再調(diào)用勾選的方法 
	this.$nextTick(() => {
		tree.children = resolveArr
		if (this.selectIds.includes(tree.paperId)) {
			this.setChildrenSelect(tree.children, true)
		}
	})
},
/**
* getTreeNodes 遞歸函數(shù)，用于遍歷樹形結(jié)構(gòu)
* @param {Object} node - 節(jié)點對象
* @returns {Array} - 返回包含節(jié)點 planId 的數(shù)組
*/
getTreeNodes(node) {
	const result = [];

	// 遍歷當前節(jié)點，獲取 planId
	if (node.planId) {
		result.push(node.planId);
	}

	// 遍歷子節(jié)點
	if (node.children && node.children.length > 0) {
		for (const child of node.children) {
			// 遞歸調(diào)用，獲取子節(jié)點的 planId
			const childIds = this.getTreeNodes(child);
			result.push(...childIds);
		}
	}
	return result;
}