CommonListPage 通用列表页模版
基于PagedTable组件和SearchForm组件封装的高阶组件，用于生成通用场景下的列表页面。
基础用法
多tabs搜索表单
提醒
各Tab表单之间数据相互独立，表单项组件是否独立取决于items对象数组元素是否是同一对象。对于无数据表单组件(例如Input)复用同一个表单项配置对象无太大影响，但对于Select这类的组件，如果需要Options保持独立，那么配置对象就不能使用同一个引用。
带操作行的表格
操作行可以使用表单项组件来做简单的查询，复杂表单还是建议使用searchForms。
列表页数据缓存及恢复
本例会用两个会销毁的tab容器模拟页面间的切换，数据恢复只有本组件创建时才会生效，如果同页面内希望恢复，可以通过修改组件的key让组件重新渲染。
数据导出功能
组件提供了一个导出按钮，如果提供了exportUrl参数，点击按钮会打开新标签页用于下载导出文件。
可以通过currentSearchParams.sync同步当前表单搜索条件，用于控制导出数据范围。
使用提示
组件透传了对应参数以及事件绑定给PagedTable组件。具见组件文档。
Attributes
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| row-key | string/Function | Table组件的row-key参数 | -- | 'id' |
| export-url | string | 导出文件的链接地址，为空时不显示导出按钮 | -- | -- |
| export-options | object | 导出按钮的配置对象 | 见 导出配置 | -- |
| tabs-props | object | Tabs组件绑定参数对象，仅在有tabs时生效。 | -- | -- |
| tab-form-key | string | 是否将Tabs组件的绑定值使用此参数指定key合入请求参数之中。为空时不合入。 | -- | -- |
| search-forms | object/object[] | 搜索表单配置对象，或者配置对象数组。为数组时会生成tabs。 | 见 搜索表单配置 | -- |
| search-params-handler | Function(params) | 当前操作搜索表单数据更新前的处理函数，可用于对特定数据进行处理(例如时间组件数据)。 | -- | -- |
| current-search-params | object | 当前操作搜索表单的最终数据，支持.sync，仅支持内部到外部的同步。可用作生成导出链接。 | -- | -- |
| current-tab | string | 当前选中tab的name值，支持.sync，仅支持内部到外部的同步。 | -- | -- |
| operation | object | 表格操作行配置对象。 | 见 操作行配置 | -- |
export options
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | string | 导出按钮的文字内容 | -- | '数据导出' |
| btnProps | object | 导出按钮绑定的参数对象 | -- | { type: 'text', icon: 'el-icon-download' } |
| events | object | 导出按钮绑定的事件监听对象 | -- | -- |
search-forms
提示
配置对象属性大部分会绑定到SearchForm组件上，少部分属性是数组格式独有(TabPane组件参数)。需要注意的是部分属性组件内有相关逻辑控制无法覆盖。
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| -- | -- | TabPane组件参数，数组格式独有 | -- | -- |
| name | string | 选项卡绑定值value对应标识符 | -- | -- |
| label | object | 选项卡标题 | -- | -- |
| -- | -- | SearchForm组件支持参数列表，具体说明见文档 | -- | -- |
| items、button-trigger、button-item-options | -- | -- | -- | -- |
| -- | -- | -- | -- | -- |
| defaultSlot | string(ComponentName) /Component | SearchForm组件默认插槽内组件 | -- | -- |
| buttonSlot | string(ComponentName) /Component | SearchForm组件具名插槽(button)内组件 | -- | -- |
Methods
组件代理了PagedTable组件提供的所有方法，可以直接在组件实例上调用。其他内部组件方法可通过$refs获取
Slots
| name | 说明 | 作用域数据 |
|---|---|---|
| -- | 默认插槽，位于搜索表单和操作行直接 | -- |