纯前端代码实现分页效果

最新推荐文章于 2024-08-15 18:19:19 发布

苦口师_

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量79

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_41578263/article/details/132826132

版权

// 前端分页
const page = ref<any>(1); // 当前页
const size = ref<any>(10); // 每一页的数量
const total = ref<any>(0); // 总数
const pageSizes = [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000];
const tableData = ref<any>(); // 数据处理之后页面显示的数据集合
// 初始化
watch(
  () => loading.value,
  (val) => {
    if (!val) {
      dealDatas();
    }
  }
);
// 每页数量变化时
function sizeChange(val: any) {
  size.value = val;
  page.value = 1;
  dealDatas();
}
// 切换页数时
function currentChange(val: any) {
  page.value = val;
  dealDatas();
}
// 数据处理
function dealDatas() {
  const data = cloneDeep(dataSource.value); // 深克隆所有数据
  // 根据当前页和每一页显示的数量对数据做处理得到当前页面显示的数据集合
  tableData.value = data.splice((page.value - 1) * size.value, size.value);
  total.value = dataSource.value.length; // 总数
}