Page 页面
Page 组件是 PlusSearch和 PlusTable 组件的组合。
基础用法
手动控制搜索值
v0.1.17可使用实例中提供的方法setSearchFieldsValue
getSearchFieldsValue
clearSearchFieldsValue
手动控制搜索值。
搜索参数处理
配置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 | 配置信息 | array PlusColumn[] | [] | 是 |
request | request 是 Page 最重要的 API,request 会接收一个对象。对象中必须要有 data,如果需要手动分页 total 也是必需的。request 会接管 loading 的设置,同时在查询表单查询和 params 参数发生修改时重新执行。同时 查询表单的值和 params 参数也会带入。 | function | 是 | |
search | PlusSearch 的 props,不包含model-value / v-model ,columns ,searchLoading 属性。 | false / (object PlusSearchProps ) | {} | 否 |
table | PlusTable 的 props,不包含tableData ,columns ,loadingStatus ,pagination 属性。 | object PlusTableProps | {} | 否 |
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 新增)。 | object PlusPagination Props | false ( v0.1.0 新增) | 否 | |
isCard | 表格和搜索是否需要 el-card 包裹 | boolean | true | |
dividerProps v0.1.0 | el-divider 的 props | object ElDividerProps | false | false | 否 |
searchCardProps | 搜索外层的 el-card 的 props ,当 isCard 为 true 时生效 | object ElCardProps | {} | 否 |
tableCardProps | 表格外层的 el-card 的 props ,当 isCard 为 true 时生效 | object ElCardProps | {} | 否 |
immediate v0.0.9 | 是否立即执行request 获取表格数据,如为false ,组件渲染完成后将不会主动调用request | boolean | true | 否 |
pageInfoMap v0.1.0 | request 默认分页参数字段是 page , pageSize ,可以使用此参数自定义分页参数 | object | {page:'page',pageSize:'pageSize'} | 否 |
Page Events
名称 | 说明 | 类型 |
---|---|---|
requestError | 数据加载失败时触发 | function |
requestComplete v0.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-left v0.0.3 | PlusTable分页器左侧内容 (默认生效,align 属性默认是 right ) | |
pagination-right v0.0.3 | PlusTable 分页器右侧内容 (align 属性是 left 时生效) | |
action-bar-more-icon v0.0.3 | PlusTable操作栏更多傍边的 icon | |
tooltip-icon v0.0.3 | PlusTable 表格表头 tooltip icon | |
drag-sort-icon v0.0.3 | PlusTable表格拖拽行 和 列设置里拖拽 icon | |
column-settings-icon v0.0.3 | PlusTable表格表头 列设置 icon | |
density-icon v0.0.3 | PlusTable表格表头 密度 icon | |
edit-icon v0.1.4 | PlusTable 表格处于编辑状态时的 icon | |
extra v0.1.5 | 表格和搜索中间位置的插槽 |
Page Exposes
名称 | 说明 | 类型 |
---|---|---|
plusSearchInstance | PlusSearch的实例 | object |
plusTableInstance | PlusTable的实例 | object |
getList | 获取数据方法,可以用来重新加载数据 | function |
handleRest | 重置搜索数据,并将 page 置为 1 ,然后重新加载 getList | function |
handleReset v0.1.14 | 重置搜索数据,并将 page 置为 1 ,然后重新加载 getList | function |
setSearchFieldsValue v0.1.17 | 手动设置搜索值 ,传入一个对象参数,只会修改对象参数中对应值。 | function |
getSearchFieldsValue v0.1.17 | 手动获取搜索值 ,传入一个字段key 则获取的得是字段key 对应的值,默认返回所有值。 | function |
clearSearchFieldsValue v0.1.17 | 手动清空搜索值 | function |