element plus 组件 el-tree 设置 load 属性后重新加载数据的方法

'# element plus 组件 el-tree 设置 load 属性后重新加载数据的方法

一、背景与问题

在开发复杂的树形数据交互场景时，el-tree 组件的 load 属性是实现懒加载的核心机制。当需要在节点展开时动态加载子节点时，开发者通常会设置 load 属性。然而，当需要重新加载某个节点的子数据时（例如刷新节点、切换数据源、更新数据缓存等），会出现一些特殊问题。

例如：

• 如何在不刷新整个树结构的情况下重新加载某个节点的子数据？
• 当 load 函数内部使用异步请求时，如何确保重新加载时的正确性？
• 如何避免因节点状态变化导致的死循环或数据不一致？

本文将深入解析 el-tree 的 load 机制，并提供多种场景下的解决方案，涵盖性能优化、安全防护、错误处理等关键点。

二、基本原理

el-tree 的 load 属性本质是通过递归机制实现的懒加载。当用户点击展开节点时，会触发 load 方法，此时需要返回一个 Promise，用于异步获取子节点数据。默认情况下，el-tree 会自动处理节点的展开/折叠状态。

但是，当需要重新加载某个节点的子数据时，必须手动控制以下逻辑：

1. 重新获取数据：通过 API 或本地数据源重新获取子节点数据。
2. 更新节点状态：确保节点的 expanded 状态保持不变，避免因刷新导致的重新展开/折叠。
3. 更新节点内容：将新获取的子节点数据替换原有数据。

三、环境准备

确保开发环境支持 Vue3 + Element Plus：

npm install @element-plus/icons-vue @element-plus/core

项目结构建议：

src/
├── components/
│   └── TreeWithLoad.vue
├── utils/
│   └── treeUtils.js
├── App.vue
└── main.js

四、核心实现

场景一：手动刷新指定节点的子数据

<template>
  <div>
    <el-button @click="refreshNode">刷新节点</el-button>
    <el-tree
      ref="treeRef"
      :props="props"
      :load="loadNode"
      lazy
      show-checkbox
    />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const treeRef = ref()
    const props = {
      label: 'name',
      children: 'children',
      isLeaf: 'leaf'
    }

    const refreshNode = async () => {
      const node = treeRef.value.getCheckedNodes()[0] // 假设刷新第一个选中节点
      if (node && node.level !== 3) { // 确保不是叶子节点
        await refreshNodeData(node)
        node.expanded = true // 强制展开节点
        treeRef.value.updateKey(node.key) // 触发更新
      }
    }

    const refreshNodeData = async (node) => {
      // 模拟重新获取数据
      const newData = await fetchData()
      node.data.children = newData // 替换子节点数据
    }

    const fetchData = () => {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            { id: 1, name: 'Child 1', leaf: false },
            { id: 2, name: 'Child 2', leaf: true }
          ])
        }, 500)
      })
    }

    return {
      treeRef,
      props,
      refreshNode
    }
  }
}
</script>

关键点解释：

• treeRef.value.getCheckedNodes() 获取选中节点
• node.expanded = true 确保刷新后节点保持展开状态
• updateKey(node.key) 触发 Vue 的响应式更新
• 需要确保 node.data.children 是可变对象（如数组）

场景二：动态数据源切换时的重新加载

const loadNode = (node, resolve) => {
  if (node.level >= 4) return resolve()

  // 动态切换数据源
  const dataSource = node.data.source === 'local' ? fetchLocalData() : fetchRemoteData()

  dataSource.then(data => {
    node.data.children = data
    resolve(data)
  }).catch(() => {
    node.data.children = []
    resolve([])
  })
}

关键点解释：

• 通过 node.data.source 字段动态选择数据源
• 使用 resolve(data) 通知 el-tree 完成加载
• 需要确保 node.data.children 是可变数组

场景三：结合 el-input 触发刷新

<template>
  <el-input v-model="searchQuery" placeholder="输入关键字搜索" />
  <el-tree
    ref="treeRef"
    :props="props"
    :load="loadNode"
    lazy
  />
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        const filteredData = this.filterData(this.allData, this.searchQuery)
        resolve(filteredData)
      } else {
        // 后续逻辑...
      }
    },
    filterData(data, query) {
      return data.filter(item => 
        item.name.includes(query) || 
        (item.children && this.filterData(item.children, query).length > 0)
      )
    }
  }
}
</script>

关键点解释：

• 通过输入框触发全局搜索
• 重新加载根节点时过滤数据
• 需要确保 this.allData 是可变数组

五、完整案例：文件系统浏览器

<template>
  <div>
    <el-input v-model="searchQuery" placeholder="输入文件名搜索" />
    <el-button @click="refreshRoot">刷新根目录</el-button>
    <el-tree
      ref="treeRef"
      :props="props"
      :load="loadNode"
      lazy
      show-checkbox
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import { fetchFileSystem } from '@/api'

export default {
  setup() {
    const treeRef = ref()
    const props = {
      label: 'name',
      children: 'children',
      isLeaf: 'leaf'
    }
    const searchQuery = ref('')
    const allData = ref([])

    const refreshRoot = async () => {
      const newData = await fetchFileSystem()
      allData.value = newData
      treeRef.value.updateKey() // 触发根节点更新
    }

    const loadNode = (node, resolve) => {
      if (node.level === 0) {
        const filteredData = allData.value.filter(item => 
          item.name.includes(searchQuery.value) || 
          (item.children && this.filterData(item.children, searchQuery.value).length > 0)
        )
        resolve(filteredData)
      } else {
        // 后续逻辑...
      }
    }

    const filterData = (data, query) => {
      return data.filter(item => 
        item.name.includes(query) || 
        (item.children && this.filterData(item.children, query).length > 0)
      )
    }

    return {
      treeRef,
      props,
      searchQuery,
      refreshRoot
    }
  }
}
</script>

完整案例说明：

• 使用 el-input 实现文件名搜索
• 点击刷新按钮重新加载根目录
• 通过 updateKey() 触发根节点更新
• 支持深度搜索和过滤

六、源码解析

在 Element Plus 的 el-tree 组件中，关键逻辑位于 src/components/tree/index.vue。核心处理流程如下：

1. 节点展开触发：通过 @node-expand 事件监听节点展开
2. load 属性处理：在 mounted 阶段注册 load 函数
3. 异步数据处理：通过 resolve(data) 通知组件数据加载完成
4. 状态管理：通过 node.expanded 控制节点展开状态

关键代码片段：

mounted() {
  this.$on('node-expand', this.handleNodeExpand)
},
methods: {
  handleNodeExpand(node) {
    if (node.level === 0) {
      this.loadNode(node, this.resolve)
    }
  }
}

七、进阶使用

1. 多级缓存策略

const cache = new Map()

const loadNode = (node, resolve) => {
  const key = `${node.key}-${node.level}`
  if (cache.has(key)) {
    resolve(cache.get(key))
    return
  }

  // 模拟异步请求
  setTimeout(() => {
    const data = fetchData()
    cache.set(key, data)
    resolve(data)
  }, 500)
}

2. 基于权限的动态加载

const loadNode = (node, resolve) => {
  if (node.level === 0) {
    const permissions = getPermissions()
    const filteredData = allData.value.filter(item => 
      permissions.includes(item.type) || 
      (item.children && this.filterData(item.children, permissions).length > 0)
    )
    resolve(filteredData)
  }
}

3. 懒加载与预加载结合

const preLoad = (node, resolve) => {
  if (node.level === 1) {
    setTimeout(() => {
      const data = preFetchData()
      resolve(data)
    }, 200)
  }
}

八、性能与工程实践

1. 性能优化方案

2. 安全风险分析

• XSS 攻击：若从外部接口获取数据，需对 name 字段进行转义
• 数据污染：避免直接替换 node.data.children，应使用新数组
• 权限控制：确保只有授权用户才能刷新特定节点的数据

3. 异常处理机制

const loadNode = (node, resolve) => {
  try {
    const data = fetchData()
    resolve(data)
  } catch (error) {
    console.error('加载数据失败:', error)
    resolve([])
  }
}

九、常见问题与踩坑

1. 节点状态丢失问题

错误代码：

const refreshNode = () => {
  node.data.children = newData
}

问题分析：
未处理 node.expanded 状态，导致节点在刷新后自动折叠。

解决方案：

node.expanded = true
treeRef.value.updateKey(node.key)

2. 异步数据未更新问题

错误代码：

const loadNode = (node, resolve) => {
  const data = await fetchData()
  node.data.children = data
  resolve(data)
}

问题分析：
未等待 resolve(data) 的执行，可能导致数据未及时更新。

解决方案：
确保 resolve(data) 在 await 之后执行。

3. 键值冲突导致的渲染错误

错误代码：

node.key = 123

问题分析：
直接修改 key 会破坏 Vue 的响应式系统。

解决方案：
通过 updateKey(node.key) 触发更新。

十、最佳实践

十一、总结

通过深入分析 el-tree 的 load 属性机制，我们掌握了在需要重新加载节点数据时的关键技巧。本文展示了三种典型场景的实现方式，并提供了完整的案例说明。在实际开发中，需要注意以下几点：

1. 避免直接修改节点状态，应通过 updateKey 触发更新
2. 确保异步操作的正确性，使用 resolve(data) 通知组件完成加载
3. 处理好权限和安全问题，避免数据污染和 XSS 攻击
4. 合理使用缓存策略，提升性能和用户体验

在需要动态加载和刷新的场景中，这种方案是高效且可靠的。但需要注意，对于超大规模数据（如数万节点），应考虑分页加载或预加载策略，避免性能瓶颈。