vxe-table中懒加载与setTreeExpand配合使用的数据丢失问题解析

问题现象

在使用vxe-table进行树形表格开发时，当同时使用懒加载功能和setTreeExpand方法控制节点展开状态时，可能会遇到一个典型问题：在数据刷新后重新展开节点时，之前通过懒加载获取的子节点数据会丢失。

问题复现步骤

1. 初始化一个带有懒加载功能的树形表格
2. 首次加载数据后，调用setTreeExpand方法展开某些节点
3. 这些展开的节点触发懒加载，成功加载子节点数据
4. 刷新表格数据（模拟数据更新场景）
5. 再次调用setTreeExpand尝试展开相同节点
6. 此时发现之前通过懒加载获取的子节点数据已经丢失

技术原理分析

这个问题的本质在于vxe-table内部的状态管理机制。当表格数据刷新时，默认情况下会重置所有节点的展开状态和懒加载数据。而setTreeExpand方法只是简单地切换节点的展开状态，并不会自动重新触发懒加载逻辑。

在vxe-table的实现中，懒加载的数据通常会被临时存储在节点的某个属性中（如_loaded）。当整个表格数据被刷新时，这些临时存储的数据会被清除，但表格内部并没有自动重新触发懒加载的机制。

解决方案

要解决这个问题，我们需要在数据刷新后重新展开节点时，确保能够正确触发懒加载逻辑。以下是几种可行的解决方案：

方案一：手动管理展开状态

// 在刷新数据前保存当前展开的节点ID
const expandedKeys = this.$refs.xTable.getTreeExpandRecords().map(item => item.id)

// 刷新数据
await this.loadData()

// 数据加载完成后重新展开节点
this.$nextTick(() => {
  expandedKeys.forEach(key => {
    const row = this.$refs.xTable.getRowById(key)
    if (row) {
      this.$refs.xTable.setTreeExpand(row, true)
    }
  })
})

方案二：自定义懒加载缓存

// 在组件中维护一个懒加载缓存
data() {
  return {
    lazyLoadCache: new Map()
  }
},

methods: {
  // 自定义懒加载方法
  async lazyLoadMethod({ row }) {
    if (this.lazyLoadCache.has(row.id)) {
      return this.lazyLoadCache.get(row.id)
    }
    const data = await fetchLazyData(row.id)
    this.lazyLoadCache.set(row.id, data)
    return data
  },
  
  // 刷新数据时清空缓存
  async refreshData() {
    this.lazyLoadCache.clear()
    await this.loadData()
  }
}

方案三：使用keep-alive特性

如果项目允许，可以考虑使用vxe-table的keep-source特性来保持数据状态：

<vxe-table
  :data="tableData"
  :tree-config="{lazy: true, loadMethod: lazyLoadMethod}"
  keep-source
></vxe-table>

最佳实践建议

1. 状态保存与恢复：在刷新数据前，先保存当前的展开状态，数据加载完成后再恢复这些状态。

2. 懒加载优化：考虑实现本地缓存机制，避免重复请求相同节点的数据。

3. 性能考虑：对于大型树形表格，建议控制同时展开的节点数量，避免一次性加载过多数据。

4. 错误处理：在懒加载方法中添加适当的错误处理逻辑，确保单节点加载失败不会影响整个表格的展示。

总结

vxe-table作为一款功能强大的表格组件，在处理复杂场景如树形表格与懒加载结合时，需要开发者深入理解其内部工作机制。通过合理的状态管理和数据缓存策略，可以有效地解决这类数据丢失问题，同时提升用户体验和性能表现。