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

猜你喜欢

• 为何用jquery模块化来开发项目，用处是什么

  jquery模块化是什么？为什么我们应该使用jquery模块化来开发项目，下面让作者来介绍一下。 我们都知道jquery使用非常的简单，比起javascript来说，不管是jquery函数，还是jquery选择器，都是javascript无法可比拟的，我们可能只是少量的使用一些javascript事

• 怎么用mapboxgl实现类似航轨迹的效果

  这篇文章主要介绍了mapboxgl实现带箭头轨迹线的代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• var中for循环的使用出现问题如何解决

  这篇文章主要给大家介绍了关于var在for循环遇到的问题的几种解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

• window的name属性有什么用？使用要注意哪些？

  本文给大家分享的是window下自带name的属性的内容，一些朋友可能对于window的name属性的作用和使用等等，不是很了解，对此这本文就简单的介绍一下，接下来我们一起了解看看吧。

• JS对象属性特征包括哪些，如何理解

  这篇文章主要介绍了javascript对象3个属性特征，writable可写、enumerable可枚举、configurable可配置，下面来看看文章的详细内容吧