vue.js3+element-plus+typescript table Pagination

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104

<!--  *                        _oo0oo_  *                       o8888888o  *                       88" . "88  *                       (| -_- |)  *                       0\  =  /0  *                     ___/`---'\___  *                   .' \\|     |// '.  *                  / \\|||  :  |||// \  *                 / _||||| -:- |||||- \  *                |   | \\\  - /// |   |  *                | \_|  ''\---/''  |_/ |  *                \  .-\__  '-'  ___/-. /  *              ___'. .'  /--.--\  `. .'___  *           ."" '<  `.___\_<|>_/___.' >' "".  *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |  *          \  \ `_.   \_ __\ /__ _/   .-` /  /  *      =====`-.____`.___ \_____/___.-`___.-'=====  *                        `=---='  *  *  *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  *  *            佛祖保佑     永不宕机     永无BUG  *  * @Author: geovindu  * @Date: 2024-08-26 20:02:51  * @LastEditors: geovindu  * @LastEditTime: 2024-08-26 20:12:11  * @FilePath: \vue\vuetest\src\components\tablepage.vue  * @Description: geovindu  * @lib,packpage: element plus  * @pageing 分页  * @IDE: vscode  * @jslib: node 20 vue.js 3.0  * @OS: windows10  * @database: mysql 8.0  sql server 2019 postgreSQL 16  * Copyright (c) geovindu 2024 by geovindu@163.com, All Rights Reserved.  -->  <template>      <div class="Tutorial">      <ElTable :data="paginatedData" style="width: 100%">        <ElTableColumn type="index" width="50" />        <ElTableColumn prop="id" label="ID" width="180" />        <ElTableColumn prop="title" label="Title" width="180" />        <ElTableColumn prop="description" label="Description" />        <ElTableColumn prop="createdAt" label="Created At" />      </ElTable>        <div class="pagination-block">          <ElPagination            background            layout="prev, pager, next, jumper, total, sizes"            :current-page="state.page"            :page-size="state.limit"            :page-sizes="[10, 20, 30, 40]"            :total="total"            @current-change="handleCurrentChange"            @size-change="handleSizeChange"          />        </div>      </div>    </template>      <script lang="ts" setup>  import { defineComponent, reactive, ref, computed } from "vue";  import TutorialDataService from "../services/TutorialDataService";      import { ElTableColumn,ElTable } from "element-plus";      const tableData = ref([]);    const total = ref(0); // 响应式引用，用于存储总数据项数    //   const state = reactive({      page: 1,      limit: 10,    });       // 加载数据    TutorialDataService.getAll().then(response => {      console.log("数据加载成功");      tableData.value = response.data;      total.value = response.data.length; // 更新总数据项数    }).catch(error => {      console.error("数据加载失败", error);    });          // 计算属性用于分页    const paginatedData = computed(() => {      const start = (state.page - 1) * state.limit;      const end = start + state.limit;      return tableData.value.slice(start, end);    });          // 改变页码    const handleCurrentChange = (e: number) => {      state.page = e;    };        // 改变页数限制    const handleSizeChange = (e: number) => {      state.limit = e;    };    </script>          <style scoped>    /* ... 您的样式 ... */    </style>

　　

 

 

 

https://www.geeksforgeeks.org/get-and-set-in-typescript/
https://www.typescripttutorial.net/typescript-tutorial/typescript-getters-setters/
https://bobbyhadz.com/blog/typescript-interface-getter-setter
https://www.geeksforgeeks.org/get-and-set-in-typescript/
https://ultimatecourses.com/blog/typescript-setters-getter
https://www.geeksforgeeks.org/how-to-use-getters-setters-in-typescript/
https://www.typescriptlang.org/docs/handbook/classes.html

https://www.programiz.com/javascript/getter-setter
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects
https://www.javascripttutorial.net/javascript-getters-and-setters/