el-tree 全量加载 与 懒加载

dialog 默认通过 `v-if` 控制销毁与重建，每次打开都会重新挂载 el-tree-select 并触发全量计算[^3]。 --- #### 二、优化方案及实施步骤 ##### 1. 数据加载优化 - **启用懒加载** 对 el-tree 配置 `lazy` 属性...

通过懒加载 (`lazy`) 的方式延迟加载子节点数据，仅在用户展开某个父节点时才发起请求获取其子节点数据。这样可以显著降低初次渲染的压力。 ```javascript <el-tree :data="list" :props="defaultProps" ref=...

el-tree-select是Element UI库中的一个组件，用于展示树形结构的下拉选择框。实现懒加载可以提高性能，只在需要展开节点时才加载子节点数据。 要实现el-tree-select的懒加载，需要以下步骤： 1. 在el-tree-select组件中设置lazy属性为true，表示开启懒加载模式。 2. 在el-tree-select组件中设置load方法，用于加载子节点数据。load方法接收两个参数：node和resolve。node表示当前需要加载子节点的节点对象，resolve是一个回调函数，用于将加载的子节点数据传递给el-tree-select组件。 3. 在load方法中，根据node的信息发送异步请求获取子节点数据，并在请求成功后调用resolve方法将数据传递给el-tree-select组件。 下面是一个示例代码： ```html <template> <el-tree-select v-model="selectedNode" :lazy="true" :load="loadData" ></el-tree-select> </template> <script> export default { data() { return { selectedNode: null }; }, methods: { loadData(node, resolve) { // 发送异步请求获取子节点数据 // 假设请求返回的数据格式为[{ label: 'Node 1', id: 1, children: [] }, ...] axios.get('/api/getChildren', { params: { nodeId: node.id } }) .then(response => { // 将子节点数据传递给el-tree-select组件 resolve(response.data); }) .catch(error => { console.error(error); }); } } }; </script> ``` 在上面的示例中，loadData方法使用axios发送异步请求获取子节点数据，并在请求成功后调用resolve方法将数据传递给el-tree-select组件。