基于 Vue3 + Element-plus 封装的 Table 组件,欢迎大家交流学习,持续开发中

Vue3-element-table

基于 Vue3 + Element-plus 封装的 table 组件,支持所有 elementUI table 组件配置项 文档,另外多选功能做了跨分页多选

Table 属性

除此之外支持所有 el-table 属性

参数说明类型默认值
tableData表格数据Array-
columns列配置,详情见下方 Column 属性Array-
loading加载状态Booleanfalse
tableConfig表格配置项,详情见下方 Config 属性Object-
showPagination是否显示分页Booleantrue
paginationConfig分页器配置项,详情见下方 paginationConfig 属性Object-

Column 属性

除此之外支持所有 el-table-column 属性

参数说明类型默认值
slotName开启 slot 支持,用于自定义列Booleanfalse

tableConfig 配置项

除此之外支持所有 el-table attributes

参数说明类型默认值
rowKey行数据的 Key,用来优化 Table 的渲染;在使用 多选 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function。Function(row)/String
showSeletion是否支持多选Booleanfalse
showIndexColumn是否显示序号列Booleanfalse
indexLabel自定义索引名String序号
isCheckMemory是否需要跨页勾选Booleanfalse
showHandler是否显示操作列Booleanfalse
showExpand是否是展开行Booleanfalse
showAppend插入至表格最后一行之后的内容, 如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。 若表格有合计行,该 slot 会位于合计行之上Booleanfalse
appendLabel自定义默认内容String自定义
handlerConfig操作列配置,showHandler 为 true 时有效Object{ label: “操作”, minWidth: 80, fixed: “right” }

Page 配置项

除此之外支持所有 el-pagination 配置项

参数说明类型默认值
total条目数number0
current当前页数number1
pageSize每页显示条目个数number10
pageSizes每页显示个数选择器的选项设置Array[10, 20, 30, 50]
layout组件布局,子组件名用逗号分隔String“total, sizes, prev, pager, next, jumper”

Slot 插槽

name说明参数
multiSelectMenu多选显示顶部操作栏{ row, column, $index }
handler自定义操作栏的内容{ row, column, $index }
expand自定义展开行内容(必须先指定showExpand为true){ row, column, $index }
append自定义默认内容(必须先指定showAppend为true){ row, column, $index }

Events 事件

除此之外支持所有 el-table 事件

注: 因为添加了跨分页多选的功能,selection-change 会在切换分页设置勾选状态时调用多次

事件名称说明参数
current-page-changecurrentPage 改变时会触发当前页
page-size-changepageSize 改变时会触发每页条数