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>
