分页组件

测试用例

分页组件当前分页和每页条目个数具有记忆性的使用步骤

1、更新插件的版本（v2.7.1 以上）

npm install y9plugin-components

2、在utils/index.ts文件中添加记忆函数

当前页数与每页条目个数都具有记忆性（单个设置记忆性就只复制对应的方法即可）

import y9_storage from "@/utils/storage";
//分页组件，设置记忆性的时候，设置的分页对象的值与存储的值对应
export function getStoragePageSize(uniqueId, defaultNum) {
  let uniquePageSize = y9_storage.getObjectItem("uniquePageSize", uniqueId);
  if (uniquePageSize) {
    return uniquePageSize;
  } else {
    return defaultNum;
  }
}
//分页组件，设置记忆性的时候，设置的分页对象的值与存储的值对应
export function getStorageCurrPage(uniqueId, defaultNum) {
  let uniqueCurrPage = y9_storage.getObjectItem("uniqueCurrPage", uniqueId);
  if (uniqueCurrPage) {
    return uniqueCurrPage;
  } else {
    return defaultNum;
  }
}

3、组件应用处理（y9 组件库中三个组件涉及分页）

3.1、html 代码

仅每页条目个数具有记忆性

<y9Pagination ... :uniqueIdent="唯一的id值"></y9Pagination>
<y9Table ... :uniqueIdent="唯一的id值"></y9Table>
<y9List ... :uniqueIdent="唯一的id值"></y9List>

当前页数与每页条目个数都具有记忆性

<y9Pagination ... :cuPageMemory="true" :uniqueIdent="唯一的id值"></y9Pagination>
<y9Table ... :cuPageMemory="true" :uniqueIdent="唯一的id值"></y9Table>
<y9List ... :cuPageMemory="true" :uniqueIdent="唯一的id值"></y9List>

3.1、js 代码（修改对应的分页参数即可）

仅每页条目个数具有记忆性

import { getStoragePageSize } from '@/utils/index';
let y9PaginationConfig = ref({
    ···
    currentPage: 1, //当前页数，支持 v-model 双向绑定
    pageSize: getStoragePageSize('唯一的id值(uniqueIdent)', 10), //每页显示条目个数，支持 v-model 双向绑定
    ···
});

当前页数与每页条目个数都具有记忆性

import { getStorageCurrPage, getStoragePageSize } from '@/utils/index';
let y9PaginationConfig = ref({
    ···
    currentPage: getStorageCurrPage('唯一的id值(uniqueIdent)', 1), //当前页数，支持 v-model 双向绑定
    pageSize: getStoragePageSize('唯一的id值(uniqueIdent)', 10), //每页显示条目个数，支持 v-model 双向绑定
    ···
});

4、※注意点

当前页数具有记忆性时，需额外添加一段代码

// 在用户点击退出的方法内添加如下代码
import y9_storage from "@/utils/storage"; // 如文件内有引用则不需要复制这行
y9_storage.setObjectItem("uniqueCurrPage", {});

5、运行项目

npm run serve

运行成功后，可以测试是否功能实现。