Skip to content

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表格数据总数number0
page / v-model:page当前页number
page-size v-model:page-size分页条数number
hideOnSinglePage是否在只有一页隐藏分页组件boolenfalse
placeholder当属性值满足 emptyValues 时的占位符string--
emptyValues需要被占位的属性值array['',null,undefined]
canCustomColumn是否自定义展示的列,为true会显示一个控制自定义类的按钮booleanfalse
paginationConfig表格分页属性配置,详情查看El Pagination组件object
round是否为圆角booleanfalse

Column属性

TIP

除了以下属性,其余属性请参考ElTableColumn

属性名说明类型默认值
prop和列内容对应的字段名对应string
label显示的标题string
isRequired在使用自定义列的功能时,该属性用于约束该列能一直可以显示booleanfalse
slots定义表头或单元格插槽名称。title配置表头插槽名称,customRender配置单元格名称。object
children配置多级表头时会使用。array

事件

TIP

除了以下事件,还支持ElTable的事件,但不保证所有事件都能正常使用。

名称说明类型
page-and-size-change当切换页数和切换每页条数时会触发该事件。当调用 resetPageAndSize方法时,第3个参数返回true。Function

方法

TIP

除了以下方法,还支持ElTable的方法,但不保证所有方法都能正常使用。

名称说明类型
resetPageAndSize让分页器重置页数和每页条数,且page-and-size-change 方法返回的第3个参数为 trueFunction