1.0.14 • Published 3 years ago
vue-common-table v1.0.14
vue-common-table
基于 elementUI 封装的 table 组件，支持所有 elementUI table 组件配置项 文档，另外多选功能做了跨分页多选
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 表格数据 | Array | - |
| columns | 列配置,详情见下方 Column 属性 | Array | - |
| loading | 加载状态 | Boolean | false |
| config | 表格配置项，详情见下方 Config 属性 | Object | - |
| page | 分页参数,包括:size,total,currentPage,不传时不显示分页器 | Object | null |
| pageConfig | 分页器配置项，详情见下方 PageConfig 属性 | Object | - |
Column Attributes
除此之外支持所有 el-table-column attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| slot | 开启 slot 支持，用于自定义列 | Boolean | false |
Config Attributes
除此之外支持所有 el-table attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| enableMultiSelect | 是否支持多选 | Boolean | false |
| showHandler | 是否显示操作列 | Boolean | false |
| handlerColumn | 操作列配置，showHandler 为 true 时有效 | Objext | {label: '操作',minWidth: 100,fixed: 'right'} |
| highlightSelect | 是否高亮选中行，仅多选时有效 | Boolean | true |
| showIndexColumn | 是否显示序号列 | Boolean | false |
| rowKey | 行数据的 Key，用来优化 Table 的渲染；在使用 多选 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info0.id，此种情况请使用 Function。 | Function(row)/String | -- |
PageConfig Attributes
除此之外支持所有 el-pagination attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| customClassName | 自定义分页器 className | String | - |
Slot
| name | 说明 | 参数 |
|---|---|---|
| 列的 prop 值 | 自定义列的内容,当列的 slot 属性设置为 true 时有效 | { row, column, \$index } |
| 列的 prop 值 + '-header' | 自定义表头的内容,当列的 slot 属性设置为 true 时有效 | { column, \$index } |
| handler | 自定义操作栏的内容 | { row, column, \$index } |
| multiSelectMenu | 自定义多选操作列内容，enableMultiSelect 为 true 时有效，勾选行时显示 | { selection } |
| topMenu | 自定义顶部操作，勾选行时不显示 | - |
Events
除此之外支持所有 el-table events
注： 因为添加了跨分页多选的功能，selection-change会在切换分页设置勾选状态时调用多次
| 事件名称 | 说明 | 参数 |
|---|---|---|
| current-page-change | currentPage 改变时会触发 | 当前页 |
| page-size-change | pageSize 改变时会触发 | 每页条数 |
Methods
支持所有 el-table 的 methods