el-table树结构默认选中

### 实现 Element UI `el-table` 树形结构默认选中行的方法 要在 Element UI 的 `el-table` 组件中实现树形结构的默认选中功能，可以利用 Vue 的响应式特性以及 `el-table` 提供的相关 API 来完成。以下是具体的实现方式： #### 1. 设置表格数据并定义默认选中的行 通过设置初始状态下的 `current-row-key` 或者手动触发 `setCurrentRow` 方法来实现默认选中某一行的功能。 ```javascript // 定义当前选中的行 key 值，默认为空字符串表示未选中任何行 data() { return { tableData: [ { id: 1, name: 'Node 1', hasChildren: true, children: [ { id: 2, name: 'Child Node 1-1' }, { id: 3, name: 'Child Node 1-2' } ] }, { id: 4, name: 'Node 2' } ], defaultSelectedId: 2 // 默认选中的行 ID }; } ``` #### 2. 使用 `highlight-current-row` 和 `current-change` 属性 在 `el-table` 中启用高亮显示当前行的功能，并绑定 `@current-change` 事件处理函数以便捕获用户的交互行为。 ```html <el-table ref="treeTable" :data="tableData" style="width: 100%" row-key="id" highlight-current-row :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @current-change="handleCurrentChange"> </el-table> ``` #### 3. 初始化时自动选中目标行 在组件挂载完成后，调用 `setCurrentRow` 方法将指定的目标行设为当前选中项。 ```javascript methods: { handleCurrentChange(currentRow) { console.log('当前选中的行:', currentRow); }, setDefaultSelection() { const targetRow = this.findRowById(this.tableData, this.defaultSelectedId); if (targetRow !== null && this.$refs.treeTable) { this.$nextTick(() => { this.$refs.treeTable.setCurrentRow(targetRow); // 设定默认选中行 }); } }, findRowById(data, id) { for (let i = 0; i < data.length; i++) { if (data[i].id === id) { return data[i]; } if (data[i].children && data[i].children.length > 0) { const result = this.findRowById(data[i].children, id); if (result !== null) { return result; } } } return null; } }, mounted() { this.setDefaultSelection(); // 页面加载完毕后执行初始化逻辑 } ``` 上述代码片段实现了如下功能： - **递归查找**：通过自定义方法 `findRowById` 遍历整个树状结构的数据源，找到匹配条件的第一条记录[^1]。 - **延迟渲染控制**：借助 `$nextTick()` 确保 DOM 已经更新后再尝试修改视图层的状态[^2]。 #### 4. 结合懒加载优化性能（可选项） 如果涉及大量嵌套层次或者动态加载子节点，则需额外配置好对应的异步请求接口地址与参数传递机制，在每次展开某个父级项目之前先判断其是否存在有效后代资源再决定是否发起网络通信获取更多信息内容。 --- ###