PagedList 分页列表
分页组件和列表数据插槽的高阶封装，集成分页请求，数据处理，自动发送等功能，用于简化分页场景需求。
提示
Pagination组件文档参照 Pagination(Element)
无序列表（ul）
分页表格（table）
分页列表恢复
本例会用两个会销毁的tab容器模拟页面间的切换，数据恢复只有本组件创建时才会生效，如果同页面内希望恢复，可以通过修改组件的key让组件重新渲染。
此外本来也展示了如何进行请求时序控制
Attributes
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| paged-data | object | 分页数据源，必须包含总条数和数据数组，例如{total: 200, rows: [...]} | -- | -- |
| extra-form | object | 额外的请求附带数据，传入响应式对象，传入对象引用改变或对象属性改变可自动触发请求且会重置页码 | -- | -- |
| get-paged-data | Function(params, accessKey) | 请求回调函数，会接受分页数据和extra-form传入的数据合并成params数据, 以及用于进行时序请求需要的key | -- | -- |
| loading | boolean | 数据是否在请求中 | -- | -- |
| created-auto-send | boolean | 是否在组件创建后自动发送请求 | -- | -- |
| init-data | object | 初始化分页数据，可以初始化curPage(当前页)和pageSize(每页条数) | -- | { curPage: 1, pageSize: 20 } |
| prop-keys | object | 组件内属性字段配置 | -- | 详见prop-keys |
| pagination-props | object | Pagination组件属性对象，支持绝大部分参数，不支持配置的参数见prop-keys | -- | -- |
| pagination-events | object | Pagination组件上绑定的监听事件对象 | -- | -- |
| loading-props | string / object | Loading组件属性对象 | 见Loading | -- |
| refresh | boolean | 是否重新发送请求，必须用.sync修饰符，值为true时重新发送请求，然后设置值为false。也可以用方法重新发起请求 | -- | -- |
| refresh | boolean | 是否重新发送请求，必须用.sync修饰符，值为true时重新发送请求，然后设置值为false。也可以用方法重新发起请求 | -- | -- |
| fetch-access-key | string/number | 传入的请求时序控制值，只能为基础类型的值，组件内会默认使用当前时间戳，如果因为并发原因时间戳无法满足可手动传入值 | -- | Date.now() |
| -- | -- | 以下属性为可选的高级功能，使用时可能需要多理解 | -- | -- |
| need-store | boolean | 是否需要在每次请求时在SessionStorage中保存分页数据和请求的params | -- | -- |
| restore | boolean | 是否需要恢复之前保存的值，适用于页面跳转后返回时恢复页面数据 | -- | -- |
| store-key | string | 组件保存数据时使用的命名空间，不设置则数据保存时会覆盖之前的值。建议使用当前路由name + 页面内组件用途的关键字 | -- | 'data' |
注意
组件初始化时如果设置`restore`为true且之前有存储的数据，那么组件创建后会用之前存储的数据作为参数传递给请求回调函数。
在请求回调函数执行之前组件不会响应`extra-form`属性的变化，并且分页组件也不会显示。
如果希望在异步回调函数有结果返回之前都不响应变化（比如希望手动恢复`extra-form`的展示值），可以在回调函数里返回一个Promise对象
prop-keys
注意
配置参数是prop-keys对象的键名，会合并到默认值对象。不能使用短横线写法
| 参数 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| total | string | 数据源中总数对于字段 | 'total' |
| rows | string | 数据源中数据数组对于字段 | 'rows' |
| pageSize | string | params中每页记录条数字段，不影响init-data中字段，下同 | 'size' |
| curPage | string | params中当前页码字段 | 'page' |
limited Pagination Attributes
下列Pagination组件的参数因为封装组件内维护了，故无法通过pagination-props来配置。
| 参数 | 说明 |
|---|---|
| page-size | 每页条数 |
| current-page | 当前页码，如需手动修改请使用组件提供的方法 |
| total | 总记录条数 |
| curPage | params中当前页码字段 |
Events
| 参数 | 说明 | 回调参数 |
|---|---|---|
| extra-form-change | extra-form发生变化时触发 | (newVal: any, oldValJson: string) |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| getStoreData | 获取组件内存储的数据，结构为 { pagination: {...}, params: {...} } | -- |
| sendRequest | 用当前params参数发送请求，用于重新发送请求。和refresh功能一致 | -- |
| clearStoreData | 清除组件内存储的数据 | -- |
Slots
| name | 说明 | 作用域数据 |
|---|---|---|
| -- | 默认插槽，内容会放置于表单项后，Form组件中。 | -- |
| button | 自定义按钮，传入用于触发数据改变的函数。 | { onSearch: Function() } |
Time Control
时序请求
在很多需要短时高频ajax请求，由不能对请求做等待限制的场景下，例如匹配搜索。 因为接口是异步的，并且每次请求的返回顺序是不确定的。会导致先请求的数据后返回的情况，这种场合下一般需要抛弃之前请求的回调处理逻辑，仅处理最后一次发送请求的回调。
常见做法是定义一个变量，用来保存每次请求时的时间戳，而每次请求时会当时的时间戳传入接口请求函数，在接口回调里判断传入的时间戳和保存的值是否一致，不一致则放弃后续处理逻辑。
原理是变量值在每次发起请求时都会更新，而传入函数的时间戳会定格在请求发起时，只有最后一次请求函数内传入的时间戳会和保存的值一致。