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 |
方法
TIP
除了以下方法,还支持ElTable的方法,但不保证所有方法都能正常使用。
名称 | 说明 | 类型 |
---|---|---|
resetPageAndSize | 让分页器重置页数和每页条数,且page-and-size-change 方法返回的第3个参数为 true | Function |