Nursing-home-management-system/client/src/components/ProTable/index.md

ProTable 文档 📚

1、ProTable 属性（ProTableProps）：

使用 v-bind="$attrs" 通过属性透传将 ProTable 组件属性全部透传到 el-table 上，所以我们支持 el-table 的所有 Props 属性。在此基础上，还扩展了以下 Props：

属性名	类型	是否必传	默认值	属性描述
columns	ColumnProps	✅	—	ProTable 组件会根据此字段渲染搜索表单与表格列，详情见 ColumnProps
requestApi	Function	✅	—	获取表格数据的请求 API
requestAuto	Boolean	❌	true	表格初始化是否自动执行请求 API
dataCallback	Function	❌	—	后台返回数据的回调函数，可对后台返回数据进行处理
title	String	❌	—	表格标题，目前只在打印的时候用到
pagination	Boolean	❌	true	是否显示分页组件：pagination 为 false 后台返回数据应该没有分页信息 和 list 字段，data 就是 list 数据
initParam	Object	❌	{}	表格请求的初始化参数，该值变化会自动请求表格数据
toolButton	Boolean	❌	true	是否显示表格功能按钮
rowKey	String	❌	'id'	当表格数据多选时，所指定的 id
searchCol	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：

属性名	类型	是否必传	默认值	属性描述
tag	Boolean	❌	false	当前单元格值是否为标签展示，可通过 enum 数据中 tagType 字段指定 tag 类型
isShow	Boolean	❌	true	当前列是否显示在表格内(只对 prop 列生效)
search	SearchProps	❌	—	搜索项配置，详情见 SearchProps
enum	Object | Function	❌	—	字典，可格式化单元格内容，还可以作为搜索框的下拉选项（字典可以为 API 请求函数，内部会自动执行）
isFilterEnum	Boolean	❌	true	当前单元格值是否根据 enum 格式化（例如 enum 只作为搜索项数据，不参与内容格式化）
fieldNames	Object	❌	—	指定字典 label && value 的 key 值
headerRender	Function	❌	—	自定义表头内容渲染（tsx 语法、h 语法）
render	Function	❌	—	自定义单元格内容渲染（tsx 语法、h 语法）
_children	ColumnProps	❌	—	多级表头

3、搜索项 配置（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-packer、time-picker、time-select、switch、slider
props	Object	❌	—	根据 element plus 官方文档来传递，该属性所有值会透传到组件
defaultValue	Any	❌	—	搜索项默认值
key	String	❌	—	当搜索项 key 不为 prop 属性时，可通过 key 指定
order	Number	❌	—	搜索项排序（从小到大）
span	Number	❌	1	搜索项所占用的列数，默认为 1 列
offset	Number	❌	—	搜索字段左侧偏移列数

4、ProTable 事件：

根据 ElementPlus Table 文档在 ProTable 组件上绑定事件即可，组件会通过 $attrs 透传给 el-table。

el-table 事件文档链接

5、ProTable 方法：

ProTable 组件暴露了 el-table 实例和一些组件内部的参数和方法：

el-table 方法文档链接

方法名	描述
element	el-table 实例，可以通过element.方法名来调用 el-table 的所有方法
tableData	当前页面所展示的数据
searchParam	所有的搜索参数，不包含分页
pageable	当前表格的分页数据
getTableList	获取、刷新表格数据的方法（携带所有参数）
reset	重置表格查询参数，相当于点击重置搜索按钮
clearSelection	清空表格所选择的数据，除此方法之外还可使用 element.clearSelection()
enumMap	当前表格使用的所有字典数据（Map 数据结构）
isSelected	表格是否选中数据
selectedList	表格选中的数据列表
selectedListIds	表格选中的数据列表的 id

6、ProTable 插槽：

插槽名	描述
—	默认插槽，支持直接在 ProTable 中写 el-table-column 标签
tableHeader	自定义表格头部左侧区域的插槽，一般情况该区域放操作按钮
toolButton	自定义表格头部左右侧侧功能区域的插槽
append	插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。
empty	当表格数据为空时自定义的内容
pagination	分页组件插槽
column.prop	单元格的作用域插槽
column.prop + "Header"	表头的作用域插槽