Appearance
CommonTable 通用表格
配置式数据表格。以下 17 个示例与 Vue 2 文档顺序和参数含义一一对应。
基础
运行结果表格已渲染，可直接操作
序号列
type: 'index'，序号会结合当前分页计算，默认宽度为 64px。需要更宽时通过 elementProps.width 覆盖。
运行结果表格已渲染，可直接操作
格式化列（Formatter）
通过 elementProps.formatter 透传 Element Plus 原生格式化函数。
运行结果表格已渲染，可直接操作
树形数据
保留 rowKey 与 children 数据结构，并透传 defaultExpandAll。
运行结果表格已渲染，可直接操作
超链接列
type: 'link' 配合 extendProps.linkCommand 发出命名事件。
运行结果表格已渲染，可直接操作
数据转换列
运行结果表格已渲染，可直接操作
数据转换列(多选)
运行结果表格已渲染，可直接操作
状态列
运行结果表格已渲染，可直接操作
图片列
运行结果表格已渲染，可直接操作
操作列
运行结果表格已渲染，可直接操作
操作列-状态控制
按钮校验器兼容直接接收当前 row 的 Vue 2 写法。
运行结果表格已渲染，可直接操作
分页（常规）
Total 23
- 1
- 2
- 3
- 4
- 5
- 6
- 8
运行结果表格已渲染，可直接操作
分页（大数据）
pagination.type='bigData' 使用上一页/下一页的方向分页。
运行结果表格已渲染，可直接操作
新增
运行结果表格已渲染，可直接操作
定制事件
批量按钮的 disableValidator 兼容直接接收已选数组。
运行结果表格已渲染，可直接操作
提示信息
提示：勾选数据后可以执行批量操作；停用数据不可删除。
运行结果表格已渲染，可直接操作
Element Plus 属性
Vue 3 中仍使用 elementProps 参数名，内容透传给 Element Plus ElTable。
运行结果表格已渲染，可直接操作
Table Attributes
| 参数 | 默认值 | 说明 |
|---|---|---|
loading | false | 加载状态 |
title | '' | 表格标题 |
tips | {} | 表格提示 |
rowKey | id | 行主键 |
dataSource | [] | 数据源 |
columns | [] | 列配置 |
pagination | {} | 分页配置，传 false 关闭 |
addCommand | - | 新增命令 |
customCommands | [] | 批量业务命令 |
settingCommands | [] | 设置类命令 |
getList | - | 刷新、分页、排序回调 |
tableTag | '' | 列设置缓存标识 |
elementProps | {} | 透传 ElTable |
extendProps | {} | 刷新与列设置开关 |
Column Options
列支持 type、label、dataField、dataTemplate(row,index)、elementProps 和 extendProps。列类型包括 default、selection、index、link、custom、commands、status、dot-status、keyToValue、multiKeyToValue、expand、date 与 image。
custom 表示从 customComponents 渲染 Vue 组件，必须通过 extendProps.componentKey 指向已注册组件；缺失时开发环境会报警。纯文本格式化使用顶层 dataTemplate(row, index)，不要沿用旧版 extendProps.dataTemplate。
Column ExtendProps Options
常用参数为 options、commands、linkCommand、imageCommand、imageSize 和 componentKey。
Table ExtendProps Options
cacheConfigColumns、showRefresh、showColumnConfig。
Table Events
行、单元格、选择、分页和排序事件均保留；命令的 command 字符串会作为同名事件发出。pagination 是可变的响应式对象，组件会直接更新分页和排序字段。emitRegister 提供 refresh、clearSelection 和 getSelectionRows。