Vue结合Element UI中的分页从封装到页面使用

Vue结合Element中的分页，从封装到页面使用。

分页一直让人捉摸不透，今天上班正好遇到了，就自己封装了一个分页，方便以后使用，也发出来我们一起使用。互相学习吧。

大概样式就是这样的。

那么接下来就直接上代码吧！
封装组件页面，命名为page4.vue

<template>
<div id="pagination" v-if="total>10">
    <span @click="currentchange(1)" class="btn">首页</span>
    <el-pagination
    layout="prev, pager, next"
    :total="total"
    prev-text="上一页"
    next-text = "下一页"
    @current-change="currentchange"
    @prev-click="prevclick"
    @next-click="nextclick"
    :current-page.sync="currentpage"
    :background="bg"
    >
  </el-pagination>
  <span @click="lastclick" class="btn">尾页</span>
</div>

</template>

js部分：

<script>
export default {
  props:{
    total:{
      type:Number,
      default:1
    },
    bg:{
      type:Boolean,
      default:true
    },
    pagenumber:{
      type:Number,
      default:0
    }

  },
data(){
    return{
      currentpage:null,
      lastpage:null,
    }
  },
  watch:{
      pagenumber(e){
        this.currentpage = e
      }
    },
  methods:{
    // 首页
    currentchange(i){
      this.currentpage = i,
      this.$emit("getpage",i)

    },
    //上一页
    prevclick(i){
      this.$emit("getpage",i)
    },
    //下一页
    nextclick(i){
      this.$emit('nextpage',i)
    },
    //尾页
    lastclick(){
            this.lastpage = this.total/10
            if(this.total%10 == 0){
              this.currentpage = this.lastpage
            }else{
              this.currentpage = math.ceil(this.lastpage)
            }
              this.$emit("getpage",this.currentpage)
            }
    },
  }
</script>

css部分《用的是less写的》：

<style lang="less" scoped>
#pagination{
  margin: 20px 30px 0px 0px;
  text-align: right;
  .el-pagination.ia-background.el-pager li{
    background: #ffffff;
  }
  .el-paginatin .is-background .el-page li :not(.disabled).cative{
    color: blue;
  }
  .el-page .el-background .btn-next{
    background: #ffffff;
  }
  .el-page .el-background .btn-prev{
    background: #ffffff;
  }
  .span{
    font-size: 14px;
    vertical-align: middle;
    cursor: pointer;
  }
  .el-pagination{
    display: inline-block;
    vertical-align: middle;
  }
  .btn{
    vertical-align: middle;
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
  }
}
</style>

既然封装好方法了，那么就直接可以在页面使用了，引入封装好的组件。 创建一个fenye.vue页面

<fenye.vue>

<template>
   <div>
     <el-pagination @getpage = "getpage" :total="total"></el-pagination>
   </div>
</template>

js代码：

<script>
import paginatin from "./Page4"
export default {
  
    data(){
        return{
            total:1,
            pageNume:1,
        }
    },
    created(){
        this.getList()
    },
    components:{
        paginatin
    },
    methods:{
        getpage(e){
            this.page = e;
            this.getList()
        },
        getList(){
            this.$axios.post("",{

            }).then((res)=>{
                console.log(res)
            })
        }
    }
}
</script>

样式可以根据页面的位置自己来调整！在这里我就不多写了^ _ ^

特此感谢大家的观看，我们一起进步！