Js实现前端分页器

    <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
        :pager-count="5" :page-sizes="[20, 30, 40]" v-model:current-page="currentPage" background
        v-model:page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
 
const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页数据条数
const total = ref(0); // 数据总数
interface queryStyle {
  pageNo: number,
  pageSize: number,
  searcVal: string,
}
 
const queryForm = ref<queryStyle>({
  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);
};