Table 表格
基于ElementPlus二次封装的表格组件，采用js对象配置的方式生成表格。详情配置请参考El TableColumn。
WARNING
该组件只对 el-table-column 组件常用属性进行了适配，使用其他属性可能会有问题。
基础用法
表格分页
表格分页功能是通过Element Plus的Pination组件实现。
TIP
如果初始的page-size不在paginationConfig.pages 数组中时，会默认在前面插入page-size的值。
WARNING
paginationConfig 传入的 layout 属性为一个数组，数组可选值为 Pagination 组件的 layout 的值。
占位符
TIP
该功能是通过每一列配置加上table-column的 formatter 属性实现。
自定义单元格或表头
自定义列
WARNING
自定义列不能控制多级表头。
单选
API
属性
TIP
除了以下属性，同时支持ElTable的属性。
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 表格数据 | array | [] |
| columns | 表格的列配置，详情情况下面 | array | [] |
| total | 表格数据总数 | number | 0 |
| page / v-model:page | 当前页 | number | — |
| page-size v-model:page-size | 分页条数 | number | — |
| hideOnSinglePage | 是否在只有一页隐藏分页组件 | boolen | false |
| placeholder | 当属性值满足 emptyValues 时的占位符 | string | -- |
| emptyValues | 需要被占位的属性值 | array | ['',null,undefined] |
| canCustomColumn | 是否自定义展示的列，为true会显示一个控制自定义类的按钮 | boolean | false |
| paginationConfig | 表格分页属性配置，详情查看El Pagination组件 | object | — |
| round | 是否为圆角 | boolean | false |
Column属性
TIP
除了以下属性，其余属性请参考ElTableColumn。
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| prop | 和列内容对应的字段名对应 | string | — |
| label | 显示的标题 | string | — |
| isRequired | 在使用自定义列的功能时，该属性用于约束该列能一直可以显示 | boolean | false |
| slots | 定义表头或单元格插槽名称。title配置表头插槽名称，customRender配置单元格名称。 | object | — |
| children | 配置多级表头时会使用。 | array | — |
事件
TIP
除了以下事件，还支持ElTable的事件，但不保证所有事件都能正常使用。
| 名称 | 说明 | 类型 |
|---|---|---|
| page-and-size-change | 当切换页数和切换每页条数时会触发该事件。当调用 resetPageAndSize方法时，第3个参数返回true。 | Function |
方法
组件方法
| 名称 | 说明 | 类型 |
|---|---|---|
| resetPageAndSize | 让分页器重置页数和每页条数，且page-and-size-change 方法返回的第3个参数为 true | Function |
ElTable方法
TIP
暂只支持以下方法。
| 名称 | 说明 | 类型 |
|---|---|---|
| clearSelection | 清空用户的选择 | Function |
| getSelectionRows | 返回当前选择的行 | Function |
| toggleRowSelection | 用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否 | Function |
| toggleAllSelection | 用于多选表格，切换全选和全不选 | Function |
| setSingleSelectRow | 用于单选表格，选择有一行，如果不传参数，则会取消单选选中状态 | Function |