CommonListPage 通用列表页模版

基于PagedTable组件和SearchForm组件封装的高阶组件,用于生成通用场景下的列表页面。

基础用法

带操作行的表格

操作行可以使用表单项组件来做简单的查询,复杂表单还是建议使用searchForms

列表页数据缓存及恢复

本例会用两个会销毁的tab容器模拟页面间的切换,数据恢复只有本组件创建时才会生效,如果同页面内希望恢复,可以通过修改组件的key让组件重新渲染。

使用提示

组件透传了对应参数以及事件绑定给PagedTable组件。具见组件文档。

Attributes

参数类型说明可选值默认值
row-keystring/FunctionTable组件的row-key参数--'id'
export-urlstring导出文件的链接地址,为空时不显示导出按钮----
export-optionsobject导出按钮的配置对象导出配置--
tabs-propsobjectTabs组件绑定参数对象,仅在有tabs时生效。----
tab-form-keystring是否将Tabs组件的绑定值使用此参数指定key合入请求参数之中。为空时不合入。----
search-formsobject/object[]搜索表单配置对象,或者配置对象数组。为数组时会生成tabs。搜索表单配置--
search-params-handlerFunction(params)当前操作搜索表单数据更新前的处理函数,可用于对特定数据进行处理(例如时间组件数据)。----
current-search-paramsobject当前操作搜索表单的最终数据,支持.sync,仅支持内部到外部的同步。可用作生成导出链接。----
current-tabstring当前选中tab的name值,支持.sync,仅支持内部到外部的同步。----
operationobject表格操作行配置对象。操作行配置--

export options

参数类型说明可选值默认值
textstring导出按钮的文字内容--'数据导出'
btnPropsobject导出按钮绑定的参数对象--{ type: 'text', icon: 'el-icon-download' }
eventsobject导出按钮绑定的事件监听对象----

search-forms

提示

配置对象属性大部分会绑定到SearchForm组件上,少部分属性是数组格式独有(TabPane组件参数)。需要注意的是部分属性组件内有相关逻辑控制无法覆盖。

参数类型说明可选值默认值
----TabPane组件参数,数组格式独有----
namestring选项卡绑定值value对应标识符----
labelobject选项卡标题----
----SearchForm组件支持参数列表,具体说明见文档----
items、button-trigger、button-item-options--------
----------
defaultSlotstring(ComponentName)
/Component
SearchForm组件默认插槽内组件----
buttonSlotstring(ComponentName)
/Component
SearchForm组件具名插槽(button)内组件----

Methods

组件代理了PagedTable组件提供的所有方法,可以直接在组件实例上调用。其他内部组件方法可通过$refs获取

Slots

name说明作用域数据
--默认插槽,位于搜索表单和操作行直接--
Last Updated:
Contributors: wxhccche, wxhccc