0.1.6 • Published 2 years ago
简介
使用 vue3 和 element-plus 实现
可通过配置json文件生成table表格
功能
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\ | | |
| columns0.prop | 同接口字段 | String | | |
| columns0.label | 表头展示文字 | String | | |
| columns0.width | 列的宽度 | Number | | |
| columns0.align | 列是否居中 | String | left/center/right | left |
| columns0.formatterFun | 格式化列的值 | function(row, column, cellValue, index) | | |
| columns0.sortable | 支持全局排序，填入custom即可 | String | custom | |
| columns0.slotName | 具名插槽名称 | String | | |
| columns0.component | 引入的外部组件 | | | |
| columns0.extendTableColumn | 表格列配置扩展项，同el-table-column | Object | {'class-name': 'amount-2',...} | |