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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • element-ui表格如何自适应高度效果示例

    element-ui表格如何自适应高度效果示例

    这篇文章主要给大家介绍了关于element-ui表格如何自适应高度的相关资料,Element UI的Table组件默认情况下是没有自适应高度的,文中给大家介绍了解决的办法,需要的朋友可以参考下
    2023-08-08
  • vue.js父子组件通信动态绑定的实例

    vue.js父子组件通信动态绑定的实例

    今天小编就为大家分享一篇vue.js父子组件通信动态绑定的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 利用Vue3封装一个弹框组件简单吗

    利用Vue3封装一个弹框组件简单吗

    最近在项目中自己封装的一个记录一下,下面这篇文章主要给大家介绍了关于利用Vue3封装一个弹框组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • vue-router相关基础知识及工作原理

    vue-router相关基础知识及工作原理

    这篇文章主要介绍了vue-router相关基础知识及单页面应用的工作原理,需要的朋友可以参考下
    2018-03-03
  • vue引入axios同源跨域问题

    vue引入axios同源跨域问题

    这篇文章主要介绍了vue引入axios同源跨域问题,文章给大家提供了解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue props传入function时的this指向问题解读

    Vue props传入function时的this指向问题解读

    这篇文章主要介绍了Vue props传入function时的this指向问题解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 深入理解Vue transition源码分析

    深入理解Vue transition源码分析

    本篇文章主要介绍了深入理解Vue transition源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue动态改变背景图片demo分享

    vue动态改变背景图片demo分享

    今天小编就为大家分享一篇vue动态改变背景图片demo分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue使用Vue.extend创建全局toast组件实例

    vue使用Vue.extend创建全局toast组件实例

    这篇文章主要介绍了vue使用Vue.extend创建全局toast组件实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue中实现Monaco Editor自定义提示功能

    vue中实现Monaco Editor自定义提示功能

    最近小编接到一个项目,需要在浏览器的ide中支持自定义提示功能,接下来通过本文给大家介绍在vue中实现Monaco Editor自定义提示功能,需要的朋友可以参考下
    2019-07-07

最新评论