Web Front-end
JS Tutorial
Detailed explanation of the steps to implement table paging with vue+element
Detailed explanation of the steps to implement table paging with vue+element
This time I will bring you a detailed explanation of the steps to implement table pagination with vue element Paging . What are the precautions for vue element to implement table pagination? The following is a practical case. Let’s take a look. one time.
Preface
ElementUI is a Vue-based front-end framework that is open source by Ele.me. It has helped us encapsulate a series of functional components, such as grid systems, tables, forms, tree menus, notifications, etc. For projects that engage in backend management interfaces, especially projects that do not need to be compatible with ie8 or ie9 below, ElementUI is a good choice.
Moreover, the documentation of ElementUI is very detailed, and you can get started quickly by referring to the demo.
This article mainly introduces the relevant content about Vue element's implementation of table paging and front-end search. It is shared for everyone's reference and learning. I won't say much below, let's take a look at the detailed introduction.
Implementation ideas
1. There will be many tables in front-end and back-end management. If there is too much table data, paging is required;
2. If the front-end interaction requests the server for every search, it will increase the pressure on the server. Therefore, if the amount of data is not very large, the data can be returned at once and the front-end will do the retrieval
3. Paste a demo
below Sample code
<template>
<p>
<el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px"></el-input>
<el-button type="primary" @click="doFilter">搜索</el-button>
<el-button type="primary" @click="openData">展示数据</el-button>
<el-table
:data="tableDataEnd"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 2, 3, 4]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalItems">
</el-pagination>
</p>
</template>
<script>
export default {
data() {
return {
tableDataBegin: [
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-03",
name: "王二虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-04",
name: "王二虎",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-05",
name: "王三虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-06",
name: "王三虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
tableDataName: "",
tableDataEnd: [],
currentPage: 4,
pageSize: 2,
totalItems: 0,
filterTableDataEnd:[],
flag:false
};
},
created() {
this.totalItems = this.tableDataBegin.length;
if (this.totalItems > this.pageSize) {
for (let index = 0; index < this.pageSize; index++) {
this.tableDataEnd.push(this.tableDataBegin[index]);
}
} else {
this.tableDataEnd = this.tableDataBegin;
}
},
methods: {
//前端搜索功能需要区分是否检索,因为对应的字段的索引不同
//用两个变量接收currentChangePage函数的参数
doFilter() {
if (this.tableDataName == "") {
this.$message.warning("查询条件不能为空！");
return;
}
this.tableDataEnd = []
//每次手动将数据置空,因为会出现多次点击搜索情况
this.filterTableDataEnd=[]
this.tableDataBegin.forEach((value, index) => {
if(value.name){
if(value.name.indexOf(this.tableDataName)>=0){
this.filterTableDataEnd.push(value)
}
}
});
//页面数据改变重新统计数据数量和当前页
this.currentPage=1
this.totalItems=this.filterTableDataEnd.length
//渲染表格,根据值
this.currentChangePage(this.filterTableDataEnd)
//页面初始化数据需要判断是否检索过
this.flag=true
},
openData() {},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.handleCurrentChange(this.currentPage);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
//需要判断是否检索
if(!this.flag){
this.currentChangePage(this.tableDataEnd)
}else{
this.currentChangePage(this.filterTableDataEnd)
}
}, //组件自带监控当前页码
currentChangePage(list) {
let from = (this.currentPage - 1) * this.pageSize;
let to = this.currentPage * this.pageSize;
this.tableDataEnd = [];
for (; from < to; from++) {
if (list[from]) {
this.tableDataEnd.push(list[from]);
}
}
}
}
};
</script>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How Webpack builds Electron applications
##Detailed explanation of the use of Vue.js universal application framework Nuxt.js
The above is the detailed content of Detailed explanation of the steps to implement table paging with vue+element. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of obtaining administrator rights in Win11
Mar 08, 2024 pm 03:06 PM
Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer
Detailed explanation of the mode function in C++
Nov 18, 2023 pm 03:08 PM
Detailed explanation of the mode function in C++ In statistics, the mode refers to the value that appears most frequently in a set of data. In C++ language, we can find the mode in any set of data by writing a mode function. The mode function can be implemented in many different ways, two of the commonly used methods will be introduced in detail below. The first method is to use a hash table to count the number of occurrences of each number. First, we need to define a hash table with each number as the key and the number of occurrences as the value. Then, for a given data set, we run
Detailed explanation of division operation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL
Detailed explanation of the role and usage of PHP modulo operator
Mar 19, 2024 pm 04:33 PM
The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus
Detailed explanation of the linux system call system() function
Feb 22, 2024 pm 08:21 PM
Detailed explanation of Linux system call system() function System call is a very important part of the Linux operating system. It provides a way to interact with the system kernel. Among them, the system() function is one of the commonly used system call functions. This article will introduce the use of the system() function in detail and provide corresponding code examples. Basic Concepts of System Calls System calls are a way for user programs to interact with the operating system kernel. User programs request the operating system by calling system call functions
Detailed explanation of Linux curl command
Feb 21, 2024 pm 10:33 PM
Detailed explanation of Linux's curl command Summary: curl is a powerful command line tool used for data communication with the server. This article will introduce the basic usage of the curl command and provide actual code examples to help readers better understand and apply the command. 1. What is curl? curl is a command line tool used to send and receive various network requests. It supports multiple protocols, such as HTTP, FTP, TELNET, etc., and provides rich functions, such as file upload, file download, data transmission, proxy
Detailed explanation of the principle of MyBatis paging plug-in
Feb 22, 2024 pm 03:42 PM
MyBatis is an excellent persistence layer framework. It supports database operations based on XML and annotations. It is simple and easy to use. It also provides a rich plug-in mechanism. Among them, the paging plug-in is one of the more frequently used plug-ins. This article will delve into the principles of the MyBatis paging plug-in and illustrate it with specific code examples. 1. Paging plug-in principle MyBatis itself does not provide native paging function, but you can use plug-ins to implement paging queries. The principle of paging plug-in is mainly to intercept MyBatis
Learn more about Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Detailed explanation of Promise.resolve() requires specific code examples. Promise is a mechanism in JavaScript for handling asynchronous operations. In actual development, it is often necessary to handle some asynchronous tasks that need to be executed in sequence, and the Promise.resolve() method is used to return a Promise object that has been fulfilled. Promise.resolve() is a static method of the Promise class, which accepts a
