elementui table

ElementUI Table 基础用法

ElementUI 的 Table 组件用于展示结构化数据，支持排序、筛选、分页等功能。基本用法是通过 el-table 标签定义表格，el-table-column 定义列。

<el-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>

数据通过 data 属性传入，prop 对应数据对象的键名，label 为列标题。

表格属性配置

el-table 支持多种属性定制行为：

• border：添加边框
• stripe：斑马纹样式
• height：固定高度
• row-key：行唯一标识（需配合树形数据或展开行使用）

<el-table :data="tableData" border stripe height="400px">
  <!-- 列定义 -->
</el-table>

列属性扩展

el-table-column 支持自定义模板和功能：

• width：固定列宽
• sortable：启用排序
• filters：筛选配置
• formatter：格式化内容

<el-table-column 
  prop="date" 
  label="日期" 
  width="180"
  sortable
  :filters="[{text: '2023', value: '2023'}]"
  :formatter="formatDate">
</el-table-column>

自定义列模板

通过插槽可自定义列内容，使用 template 标签和 slot-scope 访问行数据：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleEdit(scope.row)">编辑</el-button>
  </template>
</el-table-column>

多级表头实现

通过嵌套 el-table-column 实现复杂表头结构：

<el-table-column label="分组信息">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table-column>

表格事件处理

常用事件包括：

• row-click：行点击事件
• selection-change：多选变化事件
• sort-change：排序变化事件

<el-table 
  @row-click="handleRowClick"
  @selection-change="handleSelectionChange">
</el-table>

动态加载数据

结合分页组件实现数据动态加载：

<el-table :data="tableData">
  <!-- 列定义 -->
</el-table>
<el-pagination 
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total">
</el-pagination>

表格性能优化

大数据量场景下建议启用虚拟滚动：

• 设置 max-height 而非 height
• 使用 v-loading 添加加载状态
• 避免在表格中嵌套复杂组件

<el-table :data="bigData" max-height="600" v-loading="loading">
  <!-- 简化列定义 -->
</el-table>