vue-common-table
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.info[0].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