foreword
In actual development, most of the paging is done with the backend. But, sometimes it's not like that, and it's not like that's not the case. The backend will return all the data at once, and it is impossible for our frontend to display all the data, but to create a paging effect. There are also some scenarios that require the front-end to create pagination, such as uploading an Excel table to display on the desired page. When the data in the table is large enough, we also need to create a paging effect.
Now, I will take you to use the method in the array sliceto realize the front-end paging effect in Vue.
principle
It is not difficult to implement front-end pagination. Use a method that requires an array slice. Take a look at the introduction of this method on the official website: The slice() method returns a new array object, which is an original array determined by begin and end Shallow copy (including begin, excluding end). The original array will not be changed. After reading this sentence, we know that this method returns a new array without destroying the original array. In fact, it cuts the data and returns the cut fragments.
sliceThe method can receive up to two parameters , one can be passed or none can be passed . Use the following chestnuts to understand the use of this method.
Use 1: don't pass parameters
Obviously, when we don't pass parameters, it will return the entire array to us. In other words, when no parameters are passed, it will not cut the original array.
// 准备一个数组
const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']
// slice 不传参数
const newSect = sect.slice()
console.log(newSect)
// (10) ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']
Use 2: pass a parameter
Obviously, when we pass a parameter, it will give us the cut array:
-
When we pass 1 , it will intercept from the element with index 1 until the last element.
-
When we pass 6 , it will intercept from the element with index 6 until the last element.
-
When we pass 10 , it will intercept from the element with index 10 until the last element. Since the length of this array is 10, its maximum index is
9. So when the first parameter is larger than the array index, an empty array will be returned, which is also reasonable. -
When we pass it
-2, it will intercept from the element with index 8 , why start from 8? When the parameter is negative, give everyone a formula:arr.length + 参数, in this example it is:10 + (-2) = 8. You can also say that he counted in reverse, and there is nothing wrong with it! (understanding maximum)
That is, when a parameter is passed, it will intercept the index from the first parameter to the last element and return it to us. When the parameter is greater than the maximum index, an empty array will be returned; when the parameter is a negative number, it will reverse the starting interception position (you can use the above formula if you don’t understand it).
// 准备一个数组
const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']
const newSect1 = sect.slice(1)
const newSect2 = sect.slice(6)
const newSect3 = sect.sect(10)
const newSect4 = sect.slice(-2)
console.log(newSect1)
// (9) ['武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']
console.log(newSect2)
// (4) ['古墓派', '全真教', '丐帮', '明教']
console.log(newSect3)
// []
console.log(newSect4)
// (2) ['丐帮', '明教']
Use 3: pass two parameters
Obviously, when we pass two parameters, it will also give us the cut array, but the interception does not necessarily reach the last element:
-
When we pass 0 and 2 , it will intercept the element from index 0 to index 2 (excluding the element with index 2).
-
When we pass 8 and 20 , it will intercept the elements from index 8 to index 20 (excluding the element with index 2). Because
sectthe maximum index of this array is9, he will only intercept elements with indexes 8 and 9. It can also be said: when the second parameter is larger than the maximum index of the array, the last element will be intercepted. -
When we pass it
-2和-1, it will intercept the elements from index 8 to index 9 (excluding the element with index 9). And why? Here we can also use the above formula:arr.length + 参数, in this example, the first parameter:10 + (-2) = 8, the second parameter:10 + (-1) = 9, so it is sect.slcie(8, 9) . -
When we pass it
-2和-3, in principle it will intercept the elements from index 8 to index 7 (excluding the element with index 7). This case is special, it will return an empty array, because interception is从左往右not从右往左.
That is to say, when two parameters are passed, it will intercept from the index of the first parameter to the end of the index of the second parameter (excluding this index), and return it to us. When the second parameter is larger than the maximum index, the last element will be truncated; when the second parameter is smaller than the first parameter, an empty array will be returned; when the parameter is negative, it will be reversed to start intercepting Position (if you don't understand, you can use the above formula).
// 还是准备一个数组
const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']
const newSect1 = sect.slice(0, 2)
const newSect2 = sect.slice(8, 20)
const newSect3 = sect.slice(-2, -1)
const newSect4 = sect.slice(-2, -3)
console.log(newSect1)
// (2) ['少林派', '武当派']
console.log(newSect2)
// (2) ['丐帮', '明教']
console.log(newSect3)
// (1) ['丐帮']
console.log(newSect4)
// []
If you are familiar with this method, you can skip the above content and read directly below. If you are familiar with it, I believe that the big brother will definitely give you a lesson! ! !
accomplish
Idea: In the lifecycle function of vue, request all the data and store it in an array. Then encapsulate a method of intercepting the array to intercept the array that stores all the data, and each call returns the array fragment you want to achieve the paging effect. Here's a walkthrough of using
element-ui+vue:In data, define a variable that accepts the total data, a variable that actually displays the data (that is, a segment stored in the total data array), and a variable that contains the total number of pages (that is, the length of the total data) , a variable of the current page (default is the first page), a variable with no size (default is 10 pieces of data per page).
In the lifecycle function of vue, get all the data and store it in the variable: of the total data
tableData, and then callqueryByPagethe method to intercept the total data. By default, 10 pieces of data are intercepted ( the index is 0-9 ), and the intercepted data is saved in In the variables that actually show the datapageData. Here, 10 pieces of data are displayed as soon as it comes up. When we change the current page or the size of each page , modify the variable currentPage or pageSize , and then execute itqueryByPageto intercept the fragment we want.
The specific
queryByPagemethod is how to achieve:
- When displaying the first page and 10 data per page: the index
0-9data should be intercepted, ietableData.slice(0, 10)=>currentPage = 1;pageSize = 10.- When displaying the first page and 20 data per page: the index
0-19data should be intercepted, ietableData.slice(0, 20)=>currentPage = 1;pageSize = 20.- When displaying page 2 with 10 pieces of data per page: the indexed
10-19data should be intercepted, ietableData.slice(10, 20)=>currentPage = 2;pageSize = 20.At this point, a formula can be introduced: tableData.slice((currentPage - 1) x pageSize, currentPage x pageSize)
Vue2 version
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>vue2实现前端分页</span>
</div>
<el-table
:data="pageData"
border
size="mini"
style="width: 100%">
<el-table-column prop="name" label="姓名" width="120" align="center" />
<el-table-column prop="age" label="年龄" width="80" align="center" />
<el-table-column prop="describe" label="描述" align="center" />
</el-table>
<el-pagination
style="margin-top: 12px;text-align: right;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageTotal">
</el-pagination>
</el-card>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
// 总的数据
tableData: [],
// 分页的数据
pageData: [],
// 总数据量 默认为 0
pageTotal: 0,
// 当前页 默认是第一页
currentPage: 1,
// 每页大小 默认每页10条数据
pageSize: 10
}
},
created () {
this.fetchData()
},
methods: {
// 改变每页大小的回调
handleSizeChange (val) {
this.pageSize = val
this.pageData = this.queryByPage()
},
// 改变当前页的回调
handleCurrentChange (val) {
this.currentPage = val
this.pageData = this.queryByPage()
},
// 获取全部数据
async fetchData () {
// pubic/table_data.json ：默认请求后端数据
const {
data } = await axios.get('/table_data.json')
this.tableData = data.data
this.pageTotal = data.data.length
this.pageData = this.queryByPage()
},
// 实现分页的方法
queryByPage () {
// 起始位置 = (当前页 - 1) x 每页的大小
const start = (this.currentPage - 1) * this.pageSize
// 结束位置 = 当前页 x 每页的大小
const end = this.currentPage * this.pageSize
return this.tableData.slice(start, end)
}
}
}
</script>
Vue3 version
<script setup lang="ts">
import axios from "axios"
import {
reactive, onMounted } from "vue"
// 表格数据接口
interface ITable {
name: string;
age: number;
describe: string;
}
let data = reactive({
tableData: [] as ITable[], // 总的数据
pageData: [] as ITable[], // 分页的数据
currentPage: 1, // 当前页 默认是第一页
pageSize: 10, // 每页大小 默认每页10条数据
pageTotal: 0 // 总数据量 默认为 0
})
// 在声明周期函数获取数据
onMounted(() => {
fetchData()
})
const fetchData = async () => {
// pubic/table_data.json ：默认请求后端数据
const result = await axios.get("/table_data.json")
data.tableData = result.data.data
data.pageTotal = result.data.data.length
data.pageData = queryByPage()
}
// 实现分页的方法
const queryByPage = (): ITable[] => {
// 起始位置 = (当前页 - 1) x 每页的大小
let start = (data.currentPage - 1) * data.pageSize
// 结束位置 = 当前页 x 每页的大小
let end = data.currentPage * data.pageSize
// 返回切割数组后的数据
return data.tableData.slice(start, end)
}
// 改变每页大小的方法
const handleSizeChange = (val: number) => {
data.pageSize = val
data.pageData = queryByPage()
}
// 改变当前页的方法
const handleCurrentChange = (val: number) => {
data.currentPage = val
data.pageData = queryByPage()
}
</script>
<template>
<el-card class="box-card" style="width: 70%;">
<template #header>
<div class="card-header">
<span>vue3实现前端分页</span>
</div>
</template>
<el-table :data="data.pageData" border style="width: 100%;">
<el-table-column prop="name" label="姓名" width="150" align="center" />
<el-table-column prop="age" label="年龄" width="80" align="center" />
<el-table-column prop="describe" label="描述" align="center" />
</el-table>
<el-pagination
v-model:currentPage="data.currentPage"
v-model:page-size="data.pageSize"
:page-sizes="[10, 20, 50, 100]"
:background="true"
layout="total, sizes, prev, pager, next, jumper"
:total="data.pageTotal"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="margin-top: 12px;display: flex;justify-content: flex-end;"
/>
</el-card>
</template>
| 