今天小编跟大家讲解下有关“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 elementUI分页的实现是怎样，代码是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Node.JS使用mongodb存储数据的操作包括什么

  /***使用mongodb存储数据*1首先安装mongodbnodejs插件npminstallmongodb--save-dev*2安装express(非必须)***/varmongo=require("mongodb")varmongoClient=mongo.MongoClient;varurl="mongodb://

• 基于vue如何做一个猫语翻译的小程序

  Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,下面这篇文章主要给大家介绍了关于如何使用vue3实现一个人喵交流小程序的相关资料,需要的朋友可以参考下

• 基于vue开发秒杀倒计时功能的思路和代码是什么

  这篇文章主要为大家详细介绍了vue实现秒杀倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用js如何写一个倒计时提示框？

  倒计时提示框在网页设计中是比较常见的，可应用作自动弹窗，自动关闭，那么究竟要如何实现倒计时提示框呢？下面是基于javascript实现倒计时提示框的介绍，实现效果如下：

• interface接口如何定义，类实现接口怎样做

  在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象。接口也叫 interface 。在 js 中没有接口这个概念，它是新增的。该如何定义呢？下面来一起学习吧