vue--》分页效果（前端实现）
2024-09-01 10:38:35
<template>
<div>
<el-table style="width: 100%;" :data="ary">
<el-table-column type="index" width="50"></el-table-column>
<el-table-column label="编号" prop="age" width="180"></el-table-column>
<el-table-column label="用户姓名" prop="name" width="180"></el-table-column>
<el-table-column label="爱好" prop="like" width="180"></el-table-column>
</el-table>
<div class="block">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="pageList"
layout="total, prev, pager, next"
:total="total"
@click.native="pageFunction()"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "home",
components: {},
data() {
return {
list: [
{
name: "a213",
age: 12342,
like: "play code"
},
{
name: "aewr",
age: 18,
like: "play code"
},
{
name: "ewra",
age: 18,
like: "play code"
},
{
name: "reta",
age: 18,
like: "play code"
},
{
name: "fdgdfga",
age: 18,
like: "play code"
},
{
name: "dfgdfga",
age: 18,
like: "play code"
},
{
name: "cvbvca",
age: 18,
like: "pvcblay code"
},
{
name: "a",
age: 18,
like: "play code"
},
{
name: "vcbda",
age: 18,
like: "play code"
},
{
name: "sdbvcba",
age: 18,
like: "play code"
},
{
name: "bvna",
age: 18,
like: "play code"
},
{
name: "bvna",
age: 18,
like: "play code"
},
{
name: "bvna",
age: 18,
like: "play code"
}
],
pageList: 5,
currentPage1: 1,
total:13,
ary:[]
};
},
methods: {
handleCurrentChange(val) {
this.currentPage1 = val;
//alert(this.currentPage1)
},
handleSizeChange: function(size) {
this.pageList = size;
console.log(this.pageList); //每页下拉显示数据
},
tablePagination() {
/**
* 表格数据分页的方法
*/
let array = [],
startNum = 0,
endNum = 0;
this.total = this.list.length;
startNum = (this.currentPage1 - 1) * this.pageList;
if (this.currentPage1 * this.pageList < this.total) {
endNum = this.currentPage1 * this.pageList;
} else {
endNum = this.total;
}
array = this.list.slice(startNum, endNum);
this.ary = array
console.log(startNum,endNum)
console.log(this.currentPage1)
},
pageFunction(){
this.tablePagination()
}
},
//创建后先调用一下方法，做数据的请求
created(){
this.tablePagination()
}
};
</script>
<style scoped>
.itemList {
display: flex;
justify-content: space-around;
}
</style>
最新文章
- [LeetCode] Two Sum 两数之和
- boa + ajax + cgi ajax请求cgi
- php 开启socket配置
- SSH项目（struts+spring+hibernate）搭建_代码简化
- [Linux 维护]收集centos系统性能指标
- C++基础入门
- [转载]Eclipse.ini的相关说明
- 数据库 MySql（二）
- SAE java应用读写文件（TmpFS和Storage）-----绝世好代码
- PHP 5.6启动失败failed to open configuration file '/usr/local/php/etc/php-fpm.conf'
- 关于安装PHP补装PDO与PDO_MYSQL操作
- Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)
- Datetime.GetDateTimeFormats()的集合
- chrome开发工具指南（三）
- JDBC中的ResultSet无法多次循环的问题。
- Simple prefix compression
- Django中Form的基本使用
- 抽象鸡类 abstract(抽象) base(基础) class(类型)
- 比较对象--"=="与"equal"的区别
- Matplotlib中文乱码问题