这篇文章主要给大家介绍了关于vue3+element Plus实现表格前端分页的相关资料,虽然很多时候后端会把分页,搜索,排序都做好,但是有些返回数据并不多的页面,或者其他原因不能后端分页的通常会前端处理,需要的朋友可以参考下。

每一处都写了注释，还是很容易看懂的。

<template>
 <div class="home">
   <el-table :data="tableData()" style="width: 100%">
     <el-table-column type="index" width="50" />
     <el-table-column prop="date" label="日期" width="180" />
     <el-table-column prop="name" label="名字" width="180" />
     <el-table-column prop="address" label="地址" />
   </el-table>
   <div class="example-pagination-block">
     <!-- <div class="example-demonstration">分页</div> -->
     <el-pagination
       background
       layout="prev, pager, next ,total,sizes"
       :total="total"
       @current-change="handleCurrentChange"
       @size-change="handleSizeChange"
     />
   </div>
 </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
 name: "HomeView",
 components: {},
 setup() {
   //表格的全数据（这里是自定义的列表，要看分页效果自行往此数组内加数据）
   const allTableData = [
     {
       date: "2016-05-03",
       name: "Tom",
       address: "No. 189, Grove St, Los Angeles",
     },
     {
       date: "2016-05-02",
       name: "Tom",
       address: "No. 189, Grove St, Los Angeles",
     },
     {
       date: "2016-05-04",
       name: "Tom",
       address: "No. 189, Grove St, Los Angeles",
     },
     {
       date: "2016-05-01",
       name: "Tom",
       address: "No. 189, Grove St, Los Angeles",
     },
   ];
   //表格用到的参数
   const state = reactive({
     page: 1,
     limit: 10,
     total: allTableData.length,
   });
   //前端限制分页（tableData为当前展示页表格）
   const tableData = () => {
     return allTableData.filter(
       (item, index) =>
         index < state.page * state.limit &&
         index >= state.limit * (state.page - 1)
     );
   };
   //改变页码
   const handleCurrentChange = (e) => {
     state.page = e;
   };
   //改变页数限制
   const handleSizeChange = (e) => {
     state.limit = e;
   };
   return {
     allTableData,
     tableData,
     handleCurrentChange,
     handleSizeChange,
     ...toRefs(state),
   };
 },
});
</script>

总结：到此这篇关于vue3+element Plus实现表格前端分页的文章就介绍到这了。