machachong/ProTable

vue3+ts 高级表格-列表展示、搜索表单、业务表单一体配置

高级表格-列表展示、搜索表单、业务表单一体配置

简介

• 基于el-table封装拥有el-table全部属性
• 支持列、搜索配置、业务表单配置
• 支持自定义表头和单元格
• 列表请求、搜索、分页处理

ProTable属性 ProTableProps:

除了下面的属性外支持el-table的所有属性会透传给el-table

属性名	类型	是否必传	默认值	属性描述
columns	ColumnProps	✅	—	ProTable 组件会根据此字段渲染搜索表单与表格列，详情见 ColumnProps
requestFunc	Function	✅	—	获取表格数据的请求 API
filterTableData	Function	❌	—	对后台返回的表格数据进行处理 (data:[]) => []
params	Object	❌	{}	列表请求的参数
searchDataFilter	Function	❌	-	表格搜索数据处理
listData	[]	❌	-	列表数据

列表项配置 ColumnProps:

通过 v-bind="column" 会把属性传给 el-table-column ，所以支持 el-table-column 的所有 Props 属性。在此基础上，还扩展了以下 Props：

属性名	类型	是否必传	默认值	属性描述
hideInTable	Boolean	❌	false	当前项是否在列表隐藏 默认值false
formProp	ProFormItemProps	❌	null	表单项配置，详情见 ProFormItemProps
search	Boolean	❌	false	是否搜索
hideInForm	Boolean	❌	false	是否在表单隐藏

搜索项配置 ProFormItemProps:

通过 v-bind="column.formProp 会把属性传到每一项搜索组件上，所以支持大部分表单组件的属性，并在其基础上还扩展了以下 Props：

属性名	类型	是否必传	默认值	属性描述
el	String	✅	—	当前项搜索框的类型，支持：input、input-number、select、tree-select、cascader、date-packer、time-picker、time-select、switch、slider
key	String	❌	—	当搜索项 key 不为 column.prop 属性时，可通过 key 指定
source	Array，() => Promise([]) ，Ref	❌	—	当搜索框类似select类型需要data、options 数据通过此字段传递，可以传数组类型或者一个请求的方法 方法需要返回正确的类型
childEl	String	❌	—	当搜索框类似select类型需要option 子组件 此字段是传递子组件类型

ProTable 插槽：

插槽名	描述
tableHeader	自定义表格头部左侧区域的插槽，一般情况该区域放操作按钮
column.prop	单元格的作用域插槽 动态插槽
column.prop + "Header"	表头的作用域插槽 动态插槽

ProForm 插槽：

插槽名	描述
column.prop	单元格的作用域插槽 动态插槽

... 具体看代码。