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-paginationbackgroundlayout="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实现表格前端分页相关推荐

layui table数据表格前端分页
下面js代码是在前端进行分页,主要是利用表格插件的parseData参数,该参数触发是在请求数据回来后,但还未显示在表中时触发的. layui.use('table', function(){var ...
vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
element ui实现前端分页
element ui里的分页组件: <el-pagination@size-change="handleSizeChange"@current-change="ha ...
vue表格实现前端分页
前端分页的基本思想就是,后端接口全部返回list数据信息,由前端根据页数和每页条数截取数组,达到分页的目的: //1.table的data截取 :data="tableData.slice( ...
Element Plus 跟踪表格数据总数，包括查询、筛选等操作
前言 Element Plus的表格组件提供了筛选功能前端项目中,如果表格使用的是后端分页,使用表格插件及分页器插件就可以了.这种情况下,前端的表格筛选被后端的分页条件查询取代了另一种情况:不分页 ...
一次性加载数据，前端分页
在项目中,前端显示数据的时候,很多地方需要用到分页,通常有两种方式: 一:点击页码的时候,ajax请求后台服务器得到每一页数据,然后在前台进行显示二:在页面加载,或者其他事件中,一次性将数据加载至前 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
#displaytag：一个简易的Java分页插件(无需其他的前端分页插件) @FDDLC
一.话题引入: 在开发一个某某系统时,经常要用到分页. 比如PageHelper,它是后端分页插件,如果要在前端展示分页效果,要么自己编写前端的分页逻辑,要么再上一个前端分页插件. 而displayt ...
使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...

vue3+element Plus实现表格前端分页

vue3+element Plus实现表格前端分页相关推荐

最新文章

热门文章