vue+elementUI实现分页效果
更新时间：2022年07月07日 07:17:55 作者：小白_0615
这篇文章主要为大家详细介绍了vue+elementUI实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+elementUI实现分页效果的具体代码，供大家参考，具体内容如下
页面中渲染的数据不是所有数据，是需要展示的数据，即当前页的数据，默认第一页的数据，这里为showDate
template中代码段（渲染数据）
<div style="height:76vh;margin-top:1%"> <el-table :data="showData" style="width: 100%" :header-cell-style="headClass"> <el-table-column type="index" label="编号" width="80" header-align="center" align="center"></el-table-column> <el-table-column prop="name" label="企业名称" width="180" header-align="center" align="center"></el-table-column> <el-table-column prop="date" label="注册时间" width="150" header-align="center" align="center"></el-table-column> <el-table-column prop="publishNumber" label="发布岗位数量" width="130" header-align="center" align="center"></el-table-column> <el-table-column prop="checkTimes" label="查看简历次数" width="130" header-align="center" align="center"></el-table-column> <el-table-column prop="companyStatus" label="岗位发布权限" width="130" header-align="center" align="center"> <template slot-scope="scope"> <span v-if="scope.row.companyStatus == 1">否</span> <span v-else-if="scope.row.companyStatus == 0">是</span> </template> </el-table-column> <el-table-column prop="companyStatus" label="查看人才权限" width="130" header-align="center" align="center"> <template slot-scope="scope"> <span v-if="scope.row.companyStatus == 1">否</span> <span v-else-if="scope.row.companyStatus == 0">是</span> </template> </el-table-column> <el-table-column prop="RecruitmentTimes" label="现场招聘次数" width="130" header-align="center" align="center"></el-table-column> <el-table-column prop="windowPublishTimes" label="橱窗发布次数" width="130" header-align="center" align="center"></el-table-column> <el-table-column prop="companyStatus" label="企业状态" width="130" header-align="center" align="center"> <template slot-scope="scope"> <span v-if="scope.row.companyStatus == 1" style="color: #1ec6df">启用</span> <span v-else-if="scope.row.companyStatus == 0" style="color: #df721e">禁用</span> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="280"> <template> <el-link :underline="false" href="#" rel="external nofollow" rel="external nofollow" class="alink">岗位列表</el-link> <el-link :underline="false" href="#" rel="external nofollow" rel="external nofollow" class="alink">开通记录</el-link> </template> </el-table-column> </el-table> </div>
template中代码段（分页部分，与上一段代码同层级）
<div class="block"> <el-pagination :page-size="pagesize" :current-page="currentPage" layout="prev, pager, next" :total="companyData.length" @current-change="handleCurrentChange" @prev-click="upChange" @next-click="nextChange" style="text-align: center;"> </el-pagination> </div>
下面是逻辑实现
1.定义数组
2.初始化赋值第一页的数据
slice()
<script>
export default {
//页面第一次加载 显示的数据
created() {
this.showData = this.companyData.slice(0, this.pagesize);
console.log("显示的数据");
console.log(this.showData);
},
data() {
return {
// 企业名称
companyName: "",
showData: [], //显示的数据
pagesize: 3, //一页的数据条数
currentPage: 1, //当前页是从哪页开始
companyData: [
{
name: "企业名称1",
date: "2016-05-04",
publishNumber: 12,
checkTimes: 10,
RecruitmentTimes: 110,
windowPublishTimes: 120,
companyStatus: 0,
},
{
name: "企业名称2",
date: "2016-05-04",
publishNumber: 12,
checkTimes: 10,
RecruitmentTimes: 110,
windowPublishTimes: 120,
companyStatus: 0,
},
{
name: "企业名称3",
date: "2016-05-04",
publishNumber: 12,
checkTimes: 10,
RecruitmentTimes: 110,
windowPublishTimes: 120,
companyStatus: 1,
},
{
name: "企业名称4",
date: "2016-05-04",
publishNumber: 12,
checkTimes: 10,
RecruitmentTimes: 110,
windowPublishTimes: 120,
companyStatus: 1,
},
{
name: "企业名称5",
date: "2016-05-04",
publishNumber: 12,
checkTimes: 10,
RecruitmentTimes: 110,
windowPublishTimes: 120,
companyStatus: 1,
},
{
name: "企业名称6",
date: "2016-05-04",
publishNumber: 12,
checkTimes: 10,
RecruitmentTimes: 110,
windowPublishTimes: 120,
companyStatus: 1,
},
{
name: "企业名称7",
date: "2016-05-04",
publishNumber: 12,
checkTimes: 10,
RecruitmentTimes: 110,
windowPublishTimes: 120,
companyStatus: 1,
},
],
};
},
methods: {
//选择页
handleCurrentChange(val) {
this.currentPage = val; //动态改变
this.showData = this.companyData.slice(
(this.currentPage - 1) * this.pagesize,
this.currentPage * this.pagesize
);
},
//上一页
upChange(val) {
console.log(val);
this.currentPage -= 1; //动态改变
this.showData = this.companyData.slice(
(this.currentPage - 1) * this.pagesize,
this.currentPage * this.pagesize
);
},
//下一页
nextChange(val) {
this.currentPage += 1; //动态改变
this.showData = this.companyData.slice(
(this.currentPage - 1) * this.pagesize,
this.currentPage * this.pagesize
);
},
},
};
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue Nprogress进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条，本文通过实例代码给大家讲解，需要的朋友可以参考下2021-07-07
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇文章主要介绍了Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）的方法，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-08-08
这篇文章主要介绍了vue3利用store实现记录滚动位置的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了vue-cli配置全局sass、less变量的方法，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
我们在开发 Vue 项目的时候会使用一些前端组件库,例如 Element、Ant Design 等,这些组件库虽然方便,但是也有一些缺点,比如内置的图标太少,例如我们开发医疗、财务、工程等一些前端项目,内置的图标不能满足我们的需求,所以我们常常在Vue项目中引入SVG图标2024-09-09
Vue element-ui el-cascader 只能末级多选问题
这篇文章主要介绍了Vue element-ui el-cascader 只能末级多选问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue项目页面的打印和下载PDF加loading效果的实现(加水印)
这篇文章主要介绍了vue项目页面的打印和下载PDF加loading效果的实现(加水印)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了用vue简单的实现点击按钮切换背景颜色，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要给大家分享了vue全局过滤器概念及注意事项和基本使用方法，下面文字围绕vue全局过滤器的相关资料展开具体的详细内容,需要的朋友可以参考一下，希望对你有所帮助2021-11-11
这篇文章主要介绍了Element-UI中Upload上传文件前端缓存处理示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最新评论