今天小编跟大家讲解下有关“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript中除法的使用是怎样的，返回什么

  NaN返回NaN的操作数。无限大除以无限大，返回NaN。0除以0返回NaN，无限除以0，无限返回，有限数除以0返回无限大。将Number(a)转换后运算，而不是数值。

• data引入图片的几种方式是什么，路径问题如何解决

  目录在data中引入图片正确路径1.通过import引入路径才行2.通过require更方便3.在ui上直接动态也要通过requirevue引入图片路径问题方法一方法二在data中引入图片正确路径今天踩的坑给分享出来。本来想要在横版遍历图片出来在vue中自己做轮播，结果发现在data中直接引入路径是渲染不出来的。原因是

• 使用$set方法解决ElementUI的el-select的@change操作失效的情况

  这篇文章主要介绍了VUE使用ElementUI下拉框 @change事件数据不回显问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

• vue项目中怎么实现单点登录，有哪一些方式

  最近项目停工了，RageFrame的学习暂时告一段落，这一篇给大家分享下有关单点登录的相关知识，并提供一些demo给大家参考，对vue单点登录的实现方式感兴趣的朋友一起看看吧

• Javascript作用域怎样声明，闭包的应用是怎样

  本文详细讲解了Javascript的作用域、作用域链以及闭包，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下