1、
<el-tableborder:header-cell-style="tableStyle?.headerCellStyle"ref="tableRef":data="tableData"row-key="id":default-expand-all="false" // 默認不展開所有樹形節點:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"/*配置樹形結構的屬性，children：指定子節點數據的字段名，hasChildren：指定一個布爾值字段，表示是否有子節點這樣組件就知道如何遞歸渲染樹形結構。*/lazy // 啟用懶加載模式（子節點數據不會一次性加載，而是當用戶展開某個節點時，通過load方法動態加載）:load="load"/*指定懶加載時調用的方法，這里綁定的是load方法。當用戶展開一個節點時，會觸發這個方法，傳入當前行的數據和resolve回調函數，用于異步加載子節點數據。*/
></el-table>import { treeByParentId } from '/@/api/admin/dept';const tableData = ref([])
let nowRowId = ref('')const getTableList = (parentId) => {return new Promise(resolve => {treeByParentId({parentId}).then(res => {if(res.code == 0 && Array.isArray(res.data)){resolve(res.data)} else {resolve([])useMessage().error(res.msg || '數據已加載完畢')}}).catch(() => {resolve([])})})
}const load = async (row, treeNode, resolve) => {if (!row.hasChildren) {return resolve([])} else {nowRowId.value = row.idconst data = await getTableList(row.id)row.children = dataresolve(data)}
}const getData = async (parentId = nowRowId.value) => {// 查詢的時候，如果deptName的值不為空，parentId置為空if(state.queryForm.deptName != ''){parentId = ''}const { data } = await treeByParentId({ parentId, deptName: state.queryForm.deptName })tableData.value = data
}onMounted(() => {getData()
})// 重置
const reset = () => {nowRowId.value = ''state.queryForm.deptName = ''getData()
}2、
接口的數據結構：
{"code": 0,"data": [{"id": "唯一標識","name": "節點名稱","hasChildren": true, // 必須字段！"children": [] // 必須字段（即使為空數組）},// ...其他節點]
}
