Js实现前端分页器

 

    
      

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页数据条数
const total = ref(0); // 数据总数
interface queryStyle {
  pageNo: number,
  pageSize: number,
  searcVal: string,
}

const queryForm = ref({
  pageNo: 1,
  pageSize: 20,
  searcVal: '',
})

//初始化数据

const getTableList = async () => {
  const res = await TM.API.GetAPIMethodInfoList()
  tableAllData.value = res
  tableData.value = tableAllData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
  total.value = res.length;
}


const onHandleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  // currentPage.value = 1; // 切换每页数据条数时，回到第一页
  tableData.value = tableAllData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
};

const onHandleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  tableData.value = tableAllData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
};