el-table懒加载默认展开第一级

### 实现 `el-table` 组件懒加载并默认展开第一级节点 为了实现 `el-table` 的懒加载功能，并确保默认情况下仅展开第一级节点，可以借鉴 `el-tree` 中的相关配置和逻辑。虽然 `el-table` 并不直接支持懒加载特性，但可以通过自定义方式模拟这一行为。 #### 使用 `el-table` 结合 `el-tree` 思路实现懒加载效果 通过设置表格的数据源为异步获取的方式，在首次渲染时只请求顶层数据，并利用 `expand-row-keys` 属性控制哪些行被自动展开。当用户点击某一行触发子项加载事件时，则发起新的 API 请求来填充该行下的子记录[^1]。 ```html <template> <div> <!-- 表格 --> <el-table :data="tableData" row-key="id" @row-click="handleRowClick"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="description" label="描述"></el-table-column> </el-table> <!-- 子表单 (隐藏)--> <el-dialog title="详情" v-model:visible="dialogVisible"> <el-table :data="childTableData"> <el-table-column prop="subName" label="子项目名"></el-table-column> <el-table-column prop="details" label="详细信息"></el-table-column> </el-table> </el-dialog> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; const tableData = ref([]); const childTableData = ref([]); const expandKeys = ref([0]); // 默认展开的第一级节点ID列表 let dialogVisible = false; onMounted(async () => { await fetchFirstLevelNodes(); }); async function fetchFirstLevelNodes() { const response = await fetchDataFromServer({ level: 0 }); tableData.value = response.data; } function handleRowClick(row) { if (!row.childrenLoaded) { loadChildrenForNode(row); } } async function loadChildrenForNode(parentRow) { parentRow.loadingChildren = true; try { const childrenResponse = await fetchDataFromServer({ parentId: parentRow.id, level: parentRow.level + 1 }); parentRow.children = childrenResponse.data.map((item) => Object.assign(item, { loadingChildren: false }) ); // 更新父级数据集以反映新添加的孩子们 updateParentWithNewChildren(parentRow); // 如果需要的话也可以在这里调整expandKeys的状态 } finally { delete parentRow.loadingChildren; } } </script> ``` 此代码片段展示了如何创建一个具有懒加载特性的嵌套表格结构。注意这里假设服务器端API能够接受分层次查询参数(`level`, `parentId`) 来返回相应级别的数据[^2]。