# 基于vite+vue3+elementPlus开发的表格组件
log:修复引用问题,如有问题请先使用0.0.9版本
引用的Geeker-Admin(https://github.com/HalseySpicy/Geeker-Admin)的ProTabl,目前暂时只是打包成了依赖,方便其他项目引用
使用文档
1.ProTable属性(ProTableProps) :
使用 v-bind="$attrs" 通过属性透传将 ProTable 组件属性全部透传到 el-table 上,所以我们支持 el-table 的所有 Props 属性。在此基础上,还扩展了以下 Props:
属性名 | 类型 | 是否必传 | 默认值 | 属性描述 |
---|---|---|---|---|
columns | ColumnProps | ✅ | [] | ProTable 组件会根据此字段渲染搜索表单与表格列(支持动态更新),详情见 ColumnProps |
data | Array | ❌ | — | 静态 tableData 数据(支持分页),若存在则不会使用 requestApi 返回的 data |
requestApi | Function | ❌ | — | 获取表格数据的请求 API |
requestAuto | Boolean | ❌ | true | 表格初始化时是否自动执行请求 API |
requestError | Function | ❌ | — | 表格 API 请求错误监听 |
dataCallback | Function | ❌ | — | 后台返回数据的回调函数,可对后台返回数据进行处理 |
title | String | ❌ | — | 表格标题,目前没有用到 |
pagination | Boolean | ❌ | true | 是否显示分页组件:pagination 为 false 后台返回数据应该没有分页信息 和 list 字段,data 就是 list 数据 |
initParam | Object | ❌ | {} | 表格请求的初始化参数,该值变化会重新请求表格数据 |
toolButton | Boolean|Array | ❌ | true | 是否显示表格功能按钮,支持(["refresh" |
rowKey | String | ❌ | 'id' | 当表格数据多选时,所指定的 id |
searchCol | Number| Object | ❌ | { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 } | 表格搜索项每列占比配置 |
2.Column 配置(ColumnProps):
使用 v-bind="column"
通过属性透传将每一项 column 属性全部透传到 el-table-column 上,所以我们支持 el-table-column 的所有 Props 属性。在此基础上,还扩展了以下 Props:
属性名 | 类型 | 是否必传 | 默认值 | 属性描述 |
---|---|---|---|---|
type | String | ❌ | — | 对应列的类型("index"|"selection"|"radio"|"expand"|"sort") |
tag | Boolean | ❌ | false | 当前单元格值是否为标签展示,可通过 enum 数据中 tagType 字段指定 tag 类型 |
isShow | Boolean | ❌ | true | 当前列是否显示在表格内(只对 prop 列生效) |
search | SearchProps | ❌ | — | 搜索项配置,详情见 SearchProps |
enum | Array|Function | ❌ | — | 字典,可格式化单元格内容,还可以作为搜索框的下拉选项(字典可以为 API 请求函数,内部会自动执行) |
isFilterEnum | Boolean | ❌ | true | 当前单元格值是否根据 enum 格式化(例如 enum 只作为搜索项数据,不参与内容格式化) |
fieldNames | Object | ❌ | — | 指定 label && value && children 的 key 值 |
headerRender | Function | ❌ | — | 自定义表头内容渲染(tsx 语法、h 语法) |
render | Function | ❌ | — | 自定义单元格内容渲染(tsx 语法、h 语法) |
_children | ColumnProps | ❌ | — | 多级表头 |
搜索项 配置(SearchProps):
使用 v-bind="column.search.props“
通过属性透传将 search.props 属性全部透传到每一项搜索组件上,所以我们支持 input、select、tree-select、date-packer、time-picker、time-select、switch 大部分属性,并在其基础上还扩展了以下 Props:
属性名 | 类型 | 是否必传 | 默认值 | 属性描述 |
---|---|---|---|---|
el | String | ❌ | — | 当前项搜索框的类型,支持:input、input-number、select、select-v2、tree-select、cascader、date-picker、time-picker、time-select、switch、slider |
label | String | ❌ | — | 当搜索项 label,如果不指定默认取 column 的 label |
props | Object | ❌ | — | 根据 element plus 官方文档来传递,该属性所有值会透传到组件 |
key | String | ❌ | — | 当搜索项 key 不为 prop 属性时,可通过 key 指定 |
tooltip | String | ❌ | — | 搜索提示 |
order | Number | ❌ | — | 搜索项排序(从小到大) |
span | Number | ❌ | 1 | 搜索项所占用的列数,默认为 1 列 |
offset | Number | ❌ | — | 搜索字段左侧偏移列数 |
defaultValue | Any | ❌ | — | 搜索项默认值(该值重置时会重置回初始值) |
render | Function | ❌ | 自定义搜索内容渲染(tsx 语法、h 语法) |
ProTable 事件:
根据 ElementPlus Table 文档在 ProTable 组件上绑定事件即可,组件会通过 $attrs 透传给 el-table。
事件名 | 描述 | 回调参数 |
---|---|---|
dargSort | 表格拖拽排序成功后触发, | { newIndex, oldIndex } |
search | 点击表格搜索按钮时会触发 | — |
reset | 点击表格重置按钮时会触发 | — |
ProTable 方法:
ProTable 组件暴露了 el-table 实例和一些组件内部的参数和方法:
方法名 | 描述 |
---|---|
element |
el-table 实例,可以通过proTable.value.element.***() 来调用 el-table 的所有方法 |
tableData | 当前页面所展示的数据 |
radio | 当前表格单选值(指定 type 为 "radio" 时可取到) |
pageable | 当前表格的分页数据 |
searchParam | 所有的搜索参数,不包含分页 |
searchInitParam | 所有的搜索初始化默认的参数 |
getTableList | 获取、刷新表格数据的方法(携带所有参数) |
search | 表格查询方法,相当于点击搜索按钮 |
reset | 重置表格查询参数,相当于点击重置按钮 |
handleSizeChange | 表格每页条数改变触发的事件 |
handleCurrentChange | 表格当前页改变触发的事件 |
clearSelection | 清空表格所选择的数据,除此方法之外还可使用 proTable.value.element.clearSelection()
|
enumMap | 当前表格使用的所有字典数据(Map 数据结构) |
isSelected | 表格是否选中数据 |
selectedList | 表格选中的数据列表 |
selectedListIds | 表格选中的数据列表的 id |
ProTable 插槽:
插槽名 | 描述 |
---|---|
— | 默认插槽,支持直接在 ProTable 中写 el-table-column 标签 |
tableHeader | 自定义表格头部左侧区域的插槽,一般情况该区域放操作按钮 |
toolButton | 自定义表格头部左右侧侧功能区域的插槽 |
append | 插入至表格最后一行之后的内容, 如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。 若表格有合计行,该 slot 会位于合计行之上。 |
empty | 当表格数据为空时自定义的内容 |
pagination | 分页组件插槽 |
column.prop | 单元格的作用域插槽 |
column.prop + "Header" |
表头的作用域插槽 |
仅供学习,如有问题请联系(wx:lbelievexm)