一、简介

使用 vue3 和 element-plus 实现
可通过配置json文件生成table表格

• 源码地址：https://github.com/zjiafeng/element-table3

二、功能

1. 根据配置文件动态生成表格和分页
2. 通过配置显示序号和复选框
3. 支持自定义插槽对表格文本进行操作
4. 分页处理、多行操作
5. 表格行合并等

三、接口

表格参数

参数	说明	类型	可选值	默认值
tableData	表格数据	Array\
tableConfig	表格配置项	Object
handleRowClick	当某一行发生变化的时候会触发	Function()
handleRowDbClick	当某一行被双击时会触发该事件	Function()
total	总条目数	Number
current	当前页数	Number
pageSize	每页显示条目个数	Number

表格事件

事件名称	说明	参数
tableChange	翻页时候触发	当前页，当前页条数

tableConfig参数

参数	说明	类型	可选值	默认值
parameter	配置相关	Object
parameter.selection	是否显示复选框	Boolean	true/false	false
parameter.index	是否显示序号	Boolean	true/false	false
parameter.pagination	是否显示分页	Boolean	true/false	false
parameter.defaultSort	默认排序规则	Object	{ prop: ”, order: ‘descending’ }
parameter.extendTable	表格配置扩展项，同el-table	Object	{‘header-cell-style’: { background: ‘#18A058’, color: ‘rgba(0, 0, 0, 0.85)’, padding: ‘8px 0px’ },…}
parameter.extendPagination	分页配置扩展项，同el-pagination	Object	{‘paginationAlign’: ‘center’,’page-sizes’: [10, 20],…}
columns	表格列	Array\
columns[0].prop	同接口字段	String
columns[0].label	表头展示文字	String
columns[0].width	列的宽度	Number
columns[0].align	列是否居中	String	left/center/right	left
columns[0].formatterFun	格式化列的值	function(row, column, cellValue, index)
columns[0].sortable	支持全局排序，填入custom即可	String	custom
columns[0].slotName	具名插槽名称	String
columns[0].component	引入的外部组件
columns[0].extendTableColumn	表格列配置扩展项，同el-table-column	Object	{‘class-name’: ‘amount-2’,…}