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

猜你喜欢

• cropperjs实现裁剪图片的具体代码是什么

  本文实例为大家分享了cropperjs实现裁剪图片功能的具体代码，供大家参考，具体内容如下

• 基于JS怎样实现图片预加载，有哪些方法

  预加载基本概念：当页面打开图片提前加载，并且缓存在用户本地，需要用到时直接进行渲染；在浏览图片较多的网页（百度图库，淘宝京东等），可以有更好的用户体验；

• vue使用中报错及bug问题怎样解决呢？

  目录出现function () { [native code] }错误的解决vue使用过程中遇到的bug及解决1.用event.target操作当前元素出现bug2.data数据更新之后渲染页面是异步的3.v-cloak解决网络不好时页面显示双花括号{{}}问题4.v-pre跳过组件和子组件的编译过程5.element

• Bootstrap网格系统如何工作，单元格宽度怎样设置

  栅格就是网格，本文详细的介绍了Bootstrap网页布局网格的原理和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue中用什么方法判断按钮能不能点击

  目录根据条件判断按钮是否可以点击方法一：使用v-if 、v-else 来判断方法二：增加一个变量,判断vue判断点击当前元素需要判断你是点击了遮罩层还是form表单接下来是分别对e.currentTarget、e.target打印根据条件判断按钮是否可以点击按钮当在特定环境下不可点击，需要根据判断来控制点击事件。方法一