Js实现纯数组页码器，使用element pagination样式 vue3+ts

xiaoming49652023-09-22 18:27

复制代码

 <el-table :data=" tableData">
 <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>

<el-table :data=" tableData">

复制代码

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页数据条数
const total = ref(0); // 数据总数




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);
};