Skip to content

Page 页面

Page 组件是 PlusSearchPlusTable 组件的组合。

基础用法

搜索参数处理

配置before-search-submit方法,可在请求前替换参数名。

默认搜索参数

配置 search.defaultValues属性,设置默认搜索参数,当页面初始化点击搜索重置按钮PlusSearch 组件的model-value / v-model 会被设置为 defaultValues。

默认分页参数

配置 defaultPageInfo属性,可以修改默认的分页参数,defaultPageInfoTS类型为PageInfo。配置defaultPageSizeList属性可以修改分页列表,其他分页属性配置可以使用pagination属性。

自定义搜索按钮

使用search-footer 自定义搜索按钮.

搜索和表格展示顺序控制

v0.1.4

默认情况下搜索和表格会按columns的顺序展示,搜索可以使用order 参数控制展示顺序(默认值为0),order 越大越靠前。

增删改查 (CRUD)

典型的增删改查。

Page API

Page Attributes

名称说明类型默认值是否必须
columns配置信息arrayPlusColumn[][]
requestrequest 是 Page 最重要的 API,request 会接收一个对象。对象中必须要有 data,如果需要手动分页 total 也是必需的。request 会接管 loading 的设置,同时在查询表单查询和 params 参数发生修改时重新执行。同时 查询表单的值和 params 参数也会带入。function
searchPlusSearch 的 props,不包含model-value / v-model,columnssearchLoading属性。false / (objectPlusSearchProps ){}
tablePlusTable 的 props,不包含tableData,columnsloadingStatus,pagination属性。objectPlusTableProps{}
paramsrequest 的 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,不包含totalmodelValuepageSizeList。不需要分页可以给false(v0.1.0 新增)。objectPlusPagination Props | false( v0.1.0 新增)
isCard表格和搜索是否需要 el-card 包裹booleantrue
dividerPropsv0.1.0el-divider 的 propsobjectElDividerProps | falsefalse
searchCardProps搜索外层的 el-card 的 props ,当 isCard 为 true 时生效objectElCardProps{}
tableCardProps表格外层的 el-card 的 props ,当 isCard 为 true 时生效objectElCardProps{}
immediatev0.0.9是否立即执行request获取表格数据,如为false,组件渲染完成后将不会主动调用requestbooleantrue
pageInfoMapv0.1.0request 默认分页参数字段是 page, pageSize,可以使用此参数自定义分页参数object {page:'page',pageSize:'pageSize'}

Page Events

名称说明类型
requestError数据加载失败时触发function
requestCompletev0.1.5数据加载完成时触发function
search点击搜索按钮时触发,(并将 page 置为 1 ,然后重新加载v0.1.8function
reset点击重置按钮时触发,并将 page 置为 1 ,然后重新加载function
paginationChange分页改变时触发function

提示

支持 PlusSearchPlusTable 的的所有事件,如 PlusSearchsearch, PlusTable 的row-click等,如下示例

示例:

html
<PlusPage :search="{ onSearch:() => {} }" :table="{ onRowClick: () => {} }" />

Page Slots

插槽名说明作用域插槽参数
table-titlePlusTable 表格标题
table-toolbarPlusTable 工具栏左侧
table-expandPlusTable 展开行
table-appendPlusTable(el-table) 最后一行
table-emptyPlusTable (el-table)空状态
search-footerPlusSearch 的 footer
pagination-leftv0.0.3PlusTable分页器左侧内容 (默认生效,align 属性默认是 right
pagination-rightv0.0.3PlusTable 分页器右侧内容 (align 属性是 left时生效)
action-bar-more-iconv0.0.3PlusTable操作栏更多傍边的 icon
tooltip-iconv0.0.3PlusTable 表格表头 tooltip icon
drag-sort-iconv0.0.3PlusTable表格拖拽行 和 列设置里拖拽 icon
column-settings-iconv0.0.3PlusTable表格表头 列设置 icon
density-iconv0.0.3PlusTable表格表头 密度 icon
edit-iconv0.1.4PlusTable 表格处于编辑状态时的 icon
extrav0.1.5表格和搜索中间位置的插槽

Page Exposes

名称说明类型
plusSearchInstancePlusSearch的实例object
plusTableInstancePlusTable的实例object
getList获取数据方法,可以用来重新加载数据function
handleRest重置搜索数据,并将 page 置为 1 ,然后重新加载 getListfunction