Page 页面
Page 组件是 PlusSearch和 PlusTable 组件的组合。
基础用法
搜索参数处理
配置before-search-submit方法，可在请求前替换参数名。
默认搜索参数
配置 search.defaultValues属性，设置默认搜索参数，当页面初始化和点击搜索重置按钮时 PlusSearch 组件的model-value / v-model 会被设置为 defaultValues。
默认分页参数
配置 defaultPageInfo属性，可以修改默认的分页参数，defaultPageInfo的TS类型为PageInfo。配置defaultPageSizeList属性可以修改分页列表，其他分页属性配置可以使用pagination属性。
自定义搜索按钮
使用search-footer 自定义搜索按钮.
搜索和表格展示顺序控制
v0.1.4默认情况下搜索和表格会按columns的顺序展示，搜索可以使用order 参数控制展示顺序(默认值为0)，order 越大越靠前。
增删改查 (CRUD)
典型的增删改查。
Page API
Page Attributes
| 名称 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
columns | 配置信息 | arrayPlusColumn[] | [] | 是 |
request | request 是 Page 最重要的 API，request 会接收一个对象。对象中必须要有 data，如果需要手动分页 total 也是必需的。request 会接管 loading 的设置，同时在查询表单查询和 params 参数发生修改时重新执行。同时 查询表单的值和 params 参数也会带入。 | function | 是 | |
search | PlusSearch 的 props，不包含model-value / v-model,columns，searchLoading属性。 | false / (objectPlusSearchProps ) | {} | 否 |
table | PlusTable 的 props，不包含tableData,columns，loadingStatus,pagination属性。 | objectPlusTableProps | {} | 否 |
params | request 的 params 其他参数，默认会带 pageSize，page 和 PlusSearch组件中的值，它的优先级高于其他配置。 | object | {} | 否 |
postData | 对通过 request 获取的数据进行处理 | function | 否 | |
beforeSearchSubmit | 搜索之前进行一些修改 | function | 否 | |
defaultPageInfo | 默认分页参数 | object PageInfo | {page:1, pageSize:10} | 否 |
defaultPageSizeList | 默认分页列表 | array | [10, 20, 30, 40, 50, 100, 200, 300, 400, 500] | 否 |
pagination | 分页组件PlusPagination 的 props，不包含total，modelValue，pageSizeList。不需要分页可以给false(v0.1.0 新增)。 | objectPlusPagination Props | false( v0.1.0 新增) | 否 | |
isCard | 表格和搜索是否需要 el-card 包裹 | boolean | true | |
dividerPropsv0.1.0 | el-divider 的 props | objectElDividerProps | false | false | 否 |
searchCardProps | 搜索外层的 el-card 的 props ，当 isCard 为 true 时生效 | objectElCardProps | {} | 否 |
tableCardProps | 表格外层的 el-card 的 props ，当 isCard 为 true 时生效 | objectElCardProps | {} | 否 |
immediatev0.0.9 | 是否立即执行request获取表格数据,如为false,组件渲染完成后将不会主动调用request | boolean | true | 否 |
pageInfoMapv0.1.0 | request 默认分页参数字段是 page, pageSize,可以使用此参数自定义分页参数 | object | {page:'page',pageSize:'pageSize'} | 否 |
Page Events
| 名称 | 说明 | 类型 |
|---|---|---|
requestError | 数据加载失败时触发 | function |
requestCompletev0.1.5 | 数据加载完成时触发 | function |
search | 点击搜索按钮时触发，（并将 page 置为 1 ，然后重新加载v0.1.8 ） | function |
reset | 点击重置按钮时触发，并将 page 置为 1 ，然后重新加载 | function |
paginationChange | 分页改变时触发 | function |
提示
支持 PlusSearch 和 PlusTable 的的所有事件，如 PlusSearch 的search, PlusTable 的row-click等，如下示例
示例：
html
<PlusPage :search="{ onSearch:() => {} }" :table="{ onRowClick: () => {} }" />Page Slots
| 插槽名 | 说明 | 作用域插槽参数 |
|---|---|---|
table-title | PlusTable 表格标题 | |
table-toolbar | PlusTable 工具栏左侧 | |
table-expand | PlusTable 展开行 | |
table-append | PlusTable（el-table） 最后一行 | |
table-empty | PlusTable （el-table）空状态 | |
search-footer | PlusSearch 的 footer | |
pagination-leftv0.0.3 | PlusTable分页器左侧内容 （默认生效，align 属性默认是 right） | |
pagination-rightv0.0.3 | PlusTable 分页器右侧内容 （align 属性是 left时生效） | |
action-bar-more-iconv0.0.3 | PlusTable操作栏更多傍边的 icon | |
tooltip-iconv0.0.3 | PlusTable 表格表头 tooltip icon | |
drag-sort-iconv0.0.3 | PlusTable表格拖拽行 和 列设置里拖拽 icon | |
column-settings-iconv0.0.3 | PlusTable表格表头 列设置 icon | |
density-iconv0.0.3 | PlusTable表格表头 密度 icon | |
edit-iconv0.1.4 | PlusTable 表格处于编辑状态时的 icon | |
extrav0.1.5 | 表格和搜索中间位置的插槽 |
Page Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
plusSearchInstance | PlusSearch的实例 | object |
plusTableInstance | PlusTable的实例 | object |
getList | 获取数据方法，可以用来重新加载数据 | function |
handleRest | 重置搜索数据，并将 page 置为 1 ，然后重新加载 getList | function |
handleResetv0.1.14 | 重置搜索数据，并将 page 置为 1 ，然后重新加载 getList | function |