Virtualized Table 虚拟化表格详解

el-table 是 Element Plus 框架中的表格组件，支持虚拟化滚动，适用于大量数据展示的场景。虚拟化滚动可以显著提高性能，避免因数据量过大导致页面卡顿。

el-table 属性详解

1. data:

   • 类型: Array
   • 用途: 表格数据。
   • 默认值: []

2. height:

   • 类型: Number | String
   • 用途: 表格的高度。
   • 默认值: —

3. max-height:

   • 类型: Number | String
   • 用途: 表格的最大高度。
   • 默认值: —

4. stripe:

   • 类型: Boolean
   • 用途: 是否为斑马纹表格。
   • 默认值: false

5. border:

   • 类型: Boolean
   • 用途: 是否带有纵向边框。
   • 默认值: false

6. fit:

   • 类型: Boolean
   • 用途: 列的宽度是否自撑开。
   • 默认值: true

7. show-header:

   • 类型: Boolean
   • 用途: 是否显示表头。
   • 默认值: true

8. highlight-current-row:

   • 类型: Boolean
   • 用途: 是否要高亮当前行。
   • 默认值: false

9. row-key:

   • 类型: String | Function
   • 用途: 行数据的唯一标识符。
   • 默认值: —

10. row-class-name:

    • 类型: String | Function
    • 用途: 行的类名。
    • 默认值: —

11. header-row-class-name:

    • 类型: String | Function
    • 用途: 表头行的类名。
    • 默认值: —

12. header-cell-class-name:

    • 类型: String | Function
    • 用途: 表头单元格的类名。
    • 默认值: —

13. cell-class-name:

    • 类型: String | Function
    • 用途: 单元格的类名。
    • 默认值: —

14. row-style:

    • 类型: Object | Function
    • 用途: 行的样式。
    • 默认值: —

15. header-row-style:

    • 类型: Object | Function
    • 用途: 表头行的样式。
    • 默认值: —

16. header-cell-style:

    • 类型: Object | Function
    • 用途: 表头单元格的样式。
    • 默认值: —

17. cell-style:

    • 类型: Object | Function
    • 用途: 单元格的样式。
    • 默认值: —

18. lazy:

    • 类型: Boolean
    • 用途: 是否启用懒加载。
    • 默认值: false

19. load:

    • 类型: Function
    • 用途: 懒加载方法。
    • 默认值: —

20. tree-props:

    • 类型: Object
    • 用途: 树形数据的配置。
    • 默认值: —

el-table-column 属性详解

1. prop:

   • 类型: String
   • 用途: 对应列内容的字段名。
   • 默认值: —

2. label:

   • 类型: String
   • 用途: 列的标题。
   • 默认值: —

3. width:

   • 类型: Number | String
   • 用途: 列的宽度。
   • 默认值: —

4. min-width:

   • 类型: Number | String
   • 用途: 列的最小宽度。
   • 默认值: —

5. fixed:

   • 类型: Boolean | String
   • 用途: 列是否固定。
   • 默认值: false

6. align:

   • 类型: String
   • 用途: 列内容的对齐方式。
   • 默认值: left

7. header-align:

   • 类型: String
   • 用途: 列标题的对齐方式。
   • 默认值: —

8. show-overflow-tooltip:

   • 类型: Boolean
   • 用途: 是否在内容过长时显示为 tooltip。
   • 默认值: false

9. sortable:

   • 类型: Boolean | String
   • 用途: 列是否可以排序。
   • 默认值: false

10. sort-method:

    • 类型: Function
    • 用途: 自定义排序方法。
    • 默认值: —

11. formatter:

    • 类型: Function
    • 用途: 列内容的格式化方法。
    • 默认值: —

12. scoped-slot:

    • 类型: String
    • 用途: 列内容的渲染函数。
    • 默认值: —

完整示例代码

<template>
  <div>
    <h2>Virtualized Table 示例</h2>

    <el-table :data="tableData" height="400" stripe>
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const tableData = ref([])

// 模拟大量数据
onMounted(() => {
  for (let i = 0; i < 1000; i++) {
    tableData.value.push({
      id: i + 1,
      name: `张三 ${i + 1}`,
      age: Math.floor(Math.random() * 100),
      address: `北京市朝阳区 ${i + 1} 号`
    });
  }
})
</script>

代码解释

1. 基本用法:

   • 使用 el-table 组件并设置 data 和 height 属性。

   • <el-table :data="tableData" height="400" stripe>
       <el-table-column prop="id" label="ID" width="100"></el-table-column>
       <el-table-column prop="name" label="姓名" width="150"></el-table-column>
       <el-table-column prop="age" label="年龄" width="100"></el-table-column>
       <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
     </el-table>
     

2. 模拟大量数据:

   • 使用 onMounted 钩子生成大量数据。

   • import { ref, onMounted } from 'vue'
     
     const tableData = ref([])
     
     // 模拟大量数据
     onMounted(() => {
       for (let i = 0; i < 1000; i++) {
         tableData.value.push({
           id: i + 1,
           name: `张三 ${i + 1}`,
           age: Math.floor(Math.random() * 100),
           address: `北京市朝阳区 ${i + 1} 号`
         });
       }
     })
     

自定义样式

• 自定义表格样式:

  • 使用 <style scoped> 自定义表格的样式。

  • .el-table {
      margin-bottom: 20px;
    }