el-table 数据动态渲染,优化你的表格性能

2023-12-16 12:38:11

el-table 数据动态渲染
el-table 是 Vue.js 中一个常用的表格组件，它提供了丰富的功能和强大的自定义能力。然而，当表格数据量非常大的时候，el-table 的渲染性能可能会受到影响。这是因为，el-table 在默认情况下会一次性渲染所有的数据，这可能会导致页面卡顿。

为了解决这个问题，我们可以使用数据动态渲染技术。数据动态渲染是指，只渲染当前可视区域的数据，当用户滚动表格时，再动态加载更多的数据。这种技术可以大大减少需要渲染的数据量，从而提高表格的渲染性能。

如何实现数据动态渲染

要实现数据动态渲染，我们可以使用 Vue.js 的 v-for 指令和 keep-alive 指令。v-for 指令可以用来循环渲染数据，而 keep-alive 指令可以用来缓存组件。

<template>
  <el-table :data="tableData" :row-key="rowKey">
    <el-table-column prop="name" label="姓名" width="100">
    </el-table-column>
    <el-table-column prop="age" label="年龄" width="100">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      rowKey: 'id',
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟从服务器加载数据
      setTimeout(() => {
        this.tableData = [...this.tableData, ...newData];
      }, 1000);
    },
  },
};
</script>