elementui lazy

ElementUI 的 Lazy 加载功能

ElementUI 的 lazy 属性主要用于优化组件性能，特别是在处理大量数据或复杂渲染时。以下是一些常见组件的 lazy 用法：

Tree 组件的 Lazy 加载

通过设置 lazy 和 load 方法实现按需加载树节点数据：

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>

data() {
  return {
    props: {
      label: 'name',
      children: 'zones',
      isLeaf: 'leaf'
    }
  }
},
methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      return resolve([{ name: 'region' }])
    }
    if (node.level > 1) return resolve([])

    setTimeout(() => {
      const data = [{
        name: 'leaf',
        leaf: true
      }, {
        name: 'zone'
      }]
      resolve(data)
    }, 500)
  }
}

Table 组件的 Lazy 加载

对于表格数据，可以通过自定义逻辑实现懒加载：

<el-table
  :data="tableData"
  style="width: 100%"
  row-key="id"
  lazy
  :load="load">
</el-table>

Image 组件的 Lazy 加载

图片懒加载可以显著提升页面性能：

<el-image
  lazy
  :src="url"
  :preview-src-list="srcList">
</el-image>

实现自定义 Lazy 加载的要点

1. 确保数据结构支持层级关系
2. 合理设置节点标识（如 isLeaf）
3. 异步加载方法应返回 Promise 或使用 resolve 回调
4. 考虑加载状态和错误处理

性能优化建议

• 合理设置加载延迟时间
• 实现数据缓存避免重复请求
• 对大数据集进行分页或虚拟滚动处理
• 结合骨架屏提升用户体验

通过合理使用 ElementUI 的 lazy 特性，可以有效优化应用性能，特别是在处理大型数据集时。