当前位置：首页 > 前端教程

elementui lazy

2026-01-15 20:36:46前端教程

关于 Element UI 的 Lazy 加载功能

Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件。其中，Lazy 加载功能主要用于优化性能，特别是在处理大量数据或图片时。以下是 Element UI 中常见的 Lazy 加载实现方式：

图片懒加载（Lazy Load）

Element UI 的 el-image 组件支持懒加载，通过 lazy 属性开启：

<template>
  <el-image :src="imageUrl" lazy></el-image>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}
</script>

表格懒加载（Lazy Load Table）

对于大数据量的表格，可以使用 el-table 的懒加载功能，通过 lazy 和 load 属性实现：

<template>
  <el-table
    :data="tableData"
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    row-key="id"
    lazy>
    <el-table-column prop="date" label="Date"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: 'Node 1'
          }
        ])
      }, 1000)
    }
  }
}
</script>

树形控件懒加载（Lazy Load Tree）

el-tree 组件支持懒加载节点数据，通过 lazy 和 load 属性实现：

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

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'zones'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'Root' }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [
          { name: 'Leaf 1' },
          { name: 'Leaf 2' }
        ]
        resolve(data)
      }, 500)
    }
  }
}
</script>