vue.js3+element-plus+typescript table Pagination

geovindu

已于 2024-08-26 21:25:17 修改

阅读量225

点赞数 1

分类专栏： typescript 文章标签： vue.js 前端 javascript

于 2024-08-26 20:13:02 首次发布

本文链接：https://blog.csdn.net/geovindu/article/details/141572294

版权

typescript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!--
 *                        _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>