精华内容
下载资源
问答
  • 文件page.vue为一个pc端的分页组件,基础的分页功能都有,基本的思路是,页面是用数据来展示的,那就直接操作相关数据来改变视图
  • 分页功能使用场景较多,故考虑封装为全局组件 自己封装成本较低,需要什么功能就添加什么功能 相对使用现成组件库,自己封装代码体积可控 二、如何封装? 1. 封装 和之前文章一样的步骤,src/components文件夹下...


    前言

    分页功能相信大家经常见到,不管是前台页面还是后台管理系统,只要涉及到数据较多的时候,就会用到分页组件。本文将带你自己封装一个分页组件,事不宜迟,开整~


    一、为什么封装?

    • 分页功能使用场景较多,故考虑封装为全局组件
    • 自己封装成本较低,需要什么功能就添加什么功能
    • 相对使用现成组件库,自己封装代码体积可控

    二、如何封装?

    1. 封装

    和之前文章一样的步骤,src/components文件夹下新建my-pagination.vue文件

    代码如下(示例):

    <template>
      <div class="my-pagination">
        <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}">上一页</a>
        <span v-if='currentPage > 3'>...</span>
        <a @click='changePage(item)' href="javascript:;" :class='{active: currentPage===item}' v-for='item in list' :key='item'>{{item}}</a>
        <span v-if='currentPage < pages - 2'>...</span>
        <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'>下一页</a>
      </div>
    </template>
    <script>
    import { computed, ref } from 'vue'
    
    export default {
      name: 'MyPagination',
      props: {
        total: {
          type: Number,
          default: 80
        },
        pagesize: {
          type: Number,
          default: 10
        }
        // 默认初始页码
        // page: {
        //   type: Number,
        //   default: 1
        // }
      },
      setup (props, { emit, attrs }) {
        // attrs表示父组件传递的属性,但是props没有接收的属性,这种属性不是响应式的
        // 动态计算中期的页码信息
        // 每页的条数
        // const pagesize = 8
        // 总页数
        const pages = computed(() => Math.ceil(props.total / props.pagesize))
        // 当前页码
        // console.log(attrs.page)
        const currentPage = ref(attrs.page || 1)
        // 动态计算页码列表
        const list = computed(() => {
          // 当父组件传递total的值发生变化时,计算属性会重新计算
          // pages = Math.ceil(props.total / props.pagesize)
          const result = []
          // 总页码小于等于5;大于5
          if (pages.value <= 5) {
            // 总页码小于等于5的情况
            for (let i = 1; i <= pages.value; i++) {
              result.push(i)
            }
          } else {
            // 总页码大于5
            if (currentPage.value <= 2) {
              // 左侧临界值
              for (let i = 1; i <= 5; i++) {
                result.push(i)
              }
            } else if (currentPage.value >= pages.value - 1) {
              // 右侧临界值
              for (let i = pages.value - 4; i <= pages.value; i++) {
                result.push(i)
              }
            } else {
              // 中间的状态
              for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
                result.push(i)
              }
            }
          }
          return result
        })
        // 控制上一页和下一页变化
        const changePage = (type) => {
          if (type === false) {
            // 上一页
            // 页面是第一页时,禁止点击操作
            if (currentPage.value === 1) return
            if (currentPage.value > 1) {
              currentPage.value -= 1
            }
          } else if (type === true) {
            // 下一页
            // 页面是最后页时,禁止点击操作
            if (currentPage.value === pages.value) return
            if (currentPage.value < pages.value) {
              currentPage.value += 1
            }
          } else {
            // 点击页码
            currentPage.value = type
          }
          emit('change-page', currentPage.value)
        }
        return { list, currentPage, pages, changePage }
      }
    }
    </script>
    <style scoped lang="less">
    .my-pagination {
      display: flex;
      justify-content: center;
      padding: 30px;
      > a {
        display: inline-block;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        border: 1px solid #e4e4e4;
        border-radius: 4px;
        margin-right: 10px;
        &:hover {
          color: #27ba9b;
        }
        &.active {
          background: #27ba9b;
          color: #fff;
          border-color: #27ba9b;
        }
        &.disabled {
          cursor: not-allowed;
          opacity: 0.4;
          &:hover {
            color: #333;
          }
        }
      }
      > span {
        margin-right: 10px;
      }
    }
    </style>
    
    

    2. 使用

    在任意.vue结尾文件中使用

    代码如下(示例):
    这里使用固定数据模拟一下

    <template>
     <div class="home-container">
       <MyPagination @change-page='changePage' :pagesize='10' :total='80' :page='1' />
     </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      name: 'App',
      setup () {
        // 筛选条件准备
        const reqParams = reactive({
          // 当前页码
          page: 1,
          // 每页的条数
          pageSize: 10
        })
        // 控制页码的变化
        const changePage = (page) => {
          // 修改分页参数,重新调用接口即可
          // console.log(page)
          reqParams.page = page
        }
    
        return { changePage }
      }
    
    }
    </script>
    
    <style lang="less">
    .home-container {
      margin: 100px auto;
      width: 1000px;
      height: 100px;
    }
    
    </style>
    
    

    三、效果演示

    在这里插入图片描述


    总结

    More haste,lespeed

    展开全文
  • vue 封装分页组件

    2018-11-30 14:39:00
    分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11", time: "22", },…] //数据列表 nextPage:1 //上一页 number:0 //第几页 numberOfElements...

    分页 一般都是调接口, 接口为这种格式

    {code: 0, msg: "success",…}
    code:0
    data:{
    
    content:[{content: "11", time: "22", },…] //数据列表
    nextPage:1  //上一页
    number:0  //第几页
    numberOfElements:10
    prevPage:1  //下一页
    size:10    //页数
    totalElements:257
    totalPages:26  //总页数
    }
    msg:"success"
    
    /**
     * 分页
     * @privat
     * 全局用的分页组件
     */
    var _pageTemplate='' +
        '<div class="page-bar">' +
        '    <ul>' +
        '        <li v-if="pageNow>1"><a v-on:click="pageClick(pageNow-1)">上一页</a></li>' +
        '        <li v-if="pageNow==1"><a class="banclick">上一页</a></li>' +
        '        <li v-for="index in indexs"  v-bind:class="{ \'active\': pageNow == index}">' +
        '            <a v-on:click="pageClick(index)">{{ index }}</a>' +
        '        </li>' +
        '        <li v-if="pageNow!=pages"><a v-on:click="pageClick(pageNow+1)">下一页</a></li>' +
        '        <li v-if="pageNow == pages"><a class="banclick">下一页</a></li>' +
        '        <li><a>共<i>{{pages}}</i>页</a></li>' +
        '        <li><a><span>跳转到第</span></a></li>' +
        '        <li><a><input type="text" v-model="inputNumber" @input="checkNumber()" style="width: 50px" maxlength="4"></a></li>' +
        '        <li><a><span>页</span></a></li>'+
        '        <li><a><span @click="pageClick(inputNumber)">确定</span></a></li>'+
        '    </ul>' +
        '</div>';
    Vue.component('vue-page',{
        template:_pageTemplate,
        props:["page_number","pages","jump"], //接收参数
        data:function(){
            return{
               pageNow:this.page_number,
               inputNumber:"",
               num:this.page_number,
            }
        },
        //监听事件
        // watch: {
        //     cur: function(oldValue , newValue){
        //         console.log(arguments);
        //     }
        // },
        //方法处理
        methods: {
            checkNumber:function () {
                var that =this;
                var reg = /[^0-9.]/g; //正则检验是否数字
                    if (reg.test(that.inputNumber)) {
                        that.inputNumber="";
                    }
                },
            pageClick:function(e){
                e=Number(e);
                if(e>this.pages){
                    e=this.pages;
                    this.inputNumber=this.pages;
                }
                if(e != this.page_number||e==this.num){
                    this.pageNow =e;
                }
                this.jump(e)
            }
        },
        //计算属性
        computed: {
            indexs: function(){
                var left = 1;
                var right = this.pages;
                var ar = [];
                if(this.pages>= 5){
                    if(this.pageNow > 3 && this.pageNow < this.pages-2){
                        left = this.pageNow - 2;
                        right = this.pageNow + 2
                    }else{
                        if(this.pageNow<=3){
                            left = 1;
                            right = 5
                        }else{
                            right = this.pages;
                            left = this.pages -4
                        }
                    }
                }
                while (left <= right){
                    ar.push(left);
                    left ++
                }
                return ar
            }
    
        }
    
    });

    这是封装得组件

     data:{
             //分页
                page:1,//第几页
                pages: 10, //总页数
                pagesize: 10,//分页数量       
    
    }     

    调用ajax 渲染数据
    Journal:function (index) {
    var that =this;
    that.page=index;
    Comm.runebws("url",{
              count:that.pagesize, //预定好跟接口
              page:that.page //预定好跟接口
    },"GET",function (result) {
    if(result.code==0){
    that.Journals=result.data.content;
    that.pages=result.data.totalPages;

    }
    })
    }

    前端html代码

     <div v-for="item in Journals">
           <div class="middle-list"><div class="middle-list-data">{{item.time}}</div></div>
           <div class="middle-list"><div class="middle-list-name">{{item.ip}}</div></div>
           <div class="middle-list"><div class="middle-list-go">{{item.content}}</div></div>
     </div>
    .page-bar{
    
    }
    ul,li{
        margin: 0px;
        padding: 0px;
    }
    li{
        list-style: none
    }
    .page-bar li:first-child>a {
        margin-left: 0px
    }
    .page-bar a{
        border: 1px solid #6062A3;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        cursor: pointer
    }
    .page-bar a:hover{
        /*background-color: #eee;*/
    }
    .page-bar a.banclick{
        cursor:not-allowed;
    }
    .page-bar .active a{
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }
    .page-bar i{
        font-style:normal;
        color: #d44950;
        margin: 0px 4px;
        font-size: 12px;
    }

    转载于:https://www.cnblogs.com/chen527/p/10044030.html

    展开全文
  • 使用Vue做双向绑定的时候,可能经常会用到分页功能,接下来通过本文给大家分享一个封装分页组件的方法,一起看看吧
  • vue封装分页组件Pagination

    千次阅读 2019-07-25 17:35:06
    本篇讲述在vue项目中封装ElementUI的分页组件Pagination 以下是子组件,即分页组件的内容 <template> <div> <el-pagination class="pagin" background layout="total, sizes, prev, pager, next...

    本篇讲述在vue项目中封装ElementUI的分页组件Pagination

    以下是子组件,即分页组件的内容

    <template>
      <div>
        <el-pagination
          class="pagin"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :page-sizes="[10 , 20, 30, 40]"
          @size-change="handleSizeChange"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          :hide-on-single-page="hidden"></el-pagination>
      </div>
    </template>
    
    <script>
    export default {
      // props: ['total', 'pageSize', 'currentPage', 'handleSizeChange', 'handleCurrentChange'],
      props: {
        'total': Number,
        'pageSize': Number,
        'currentPage': Number,
        'handleSizeChange': Function,
        'handleCurrentChange': Function
      },
      data () {
        return {
          // 分页数据
          hidden: true
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style lang="scss">
    </style>
    

    在父组件中使用:

    <!-- 组件的使用 -->
    <Pagin
      :total="total"
      :pageSize="pageSize"
       :currentPage="currentPage"
       :handleSizeChange="handleSizeChange"
       :handleCurrentChange="handleCurrentChange"></Pagin>
    
    <script>
    // 1.首先要引入组件
    import Pagin from '../public/Pagination'
    import { getTableData } from '../../api/api'
    export default {
    // 2.然后注册组件
      components: {
        Pagin
      },
      // 这两步不太清楚的可以看官网或者自行百度
      data () {
        return {
          searchInfo: {
            username: ''
          },
          tableData: [],
          // 定义分页数据
          total: 0, // 总条数
          pageSize: 10, // 每页显示条数
          currentPage: 0 // 当前页数
        }
      },
      async created () {
        await this.getData(this.pageSize, this.currentPage)
      },
      methods: {
      	// 改变当前页数函数
        handleCurrentChange (val) {
          this.getData(this.pageSize, val - 1)
        },
        // 每页多少条
        handleSizeChange (val) {
          this.getData(val, this.currentPage)
        },
        // 获取表格数据
        getData (sizes, pages) {
          getTableData(this, 'tableData', 'user/customer', this.searchInfo, {}, sizes, pages)
        }
      }
    }
    </script>
    
    
    
    展开全文
  • 1. new-pagination.vue文件: <template> <div class="new-pagination flex a-center j-between flex-row"> <div class="left flex a-center j-start flex-row"> <div>共 {{total}} 条...

    1. new-pagination.vue文件:

    <template>
        <div class="new-pagination flex a-center j-between flex-row">
            <div class="left flex a-center j-start flex-row">
                <div>共 {{total}} 条</div>
                <div class="size">前往 <span class="val">{{currentPage}}</span> 页面</div>
                <div>共 {{totalPage.length}} 页面</div>
            </div>
            <div class="right flex a-center j-end flex-row">
                <i class="el-icon-d-arrow-left i1 icon" @click="prevPage(1)" :class="[currentPage ==1 && 'icon-disable']"></i>
                <i class="el-icon-arrow-left margin-l-10 i2 icon" @click="prevPage(2)" :class="[currentPage ==1 && 'icon-disable']"></i>
                <div class="page-list flex-row a-center flex j-between">
                    <div class="box" v-if="isMore==='left' || isMore==='all'">
                       <i class="el-icon-more"></i> 
                    </div>
                    <template v-for="(item,index) in pageList">
                        <div class="box text-no-select" :class="[currentPage===item && 'box-active']"  @click="currentChange(item)"
                             :key='index'>
                            <span>{{item}}</span>    
                        </div>
                    </template>               
                    <div class="box" v-if="isMore==='right' || isMore==='all'">
                       <i class="el-icon-more"></i> 
                    </div>
                </div>
                <i class="el-icon-arrow-right margin-r-10 i3 icon" @click="nextPage(2)" :class="[currentPage ==totalPage.length && 'icon-disable']"></i>
                <i class="el-icon-d-arrow-right i4 icon" @click="nextPage(1)" :class="[currentPage ==totalPage.length && 'icon-disable']"></i>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        props:{
            total:{
                type:Number,
                default:0
            },
            currentPage:{
                type:Number,
                default:1
            },
            pageSize:{
                type:Number,
                default:20      
            }
        },
    
        computed:{
            totalPage(){
                let result = Math.ceil(this.total/this.pageSize)
                let arr=[]
                for(var i=1;i<=result;i++){
                    arr.push(i)
                }
                console.log(arr)
                return result? arr: [1]
            },
            pageList(){
                let result =[]
                if(this.totalPage.length<=4){
                    result=this.totalPage
                }else{
                    if(this.currentPage+3<=this.totalPage.length){
                        result=[this.currentPage,this.currentPage+1,this.currentPage+2,this.currentPage+3]
                    }else {
                        result=this.totalPage.slice(-4)
                    }
                }
                return result
            },
            isMore(){
                let result =''
                if(this.totalPage.length<=4){
                    result = 'none'
                }else{
                    if(this.pageList[this.pageList.length-1]<this.totalPage[this.totalPage.length-1]){
                        result=this.pageList[0]>1?'all':'right'
                    }else if(this.pageList[this.pageList.length-1]==this.totalPage[this.totalPage.length-1]) {
                        result=this.pageList[0]>1?'left':'none'
                    }       
                }
                return result
            }
        },
        methods:{
            currentChange(val){
                this.$emit('currentChange',val)
            },
            prevPage(val){
                if(val===1){
                    this.$emit('currentChange',1)
                }else{
                    this.currentPage >1 && this.$emit('currentChange',this.currentPage-1)
                }
            },
            nextPage(val){
                if(val===1){
                    this.$emit('currentChange',this.totalPage.length)
                }else{
                    this.currentPage < this.totalPage.length && this.$emit('currentChange',this.currentPage+1)
                }
            }
        }
    }
    </script>
    <style lang="less" scoped>
    .new-pagination{
        width: 100%;
        height: 51px;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #7F88A3;
        line-height: 12px;
        .left{
            .size{
                margin: 0 6px;
                .val{
                    color: #5168AF;
                    text-decoration:underline;
                    display: inline-block;
                    margin: 0 4px;
                }
            }
        }   
        .right{
            .icon-disable{
                cursor: not-allowed;
                color: #869DEC;
            }
            .icon:hover{
                color: #305AED;
            }
            i{
                cursor: pointer;
            }
            .margin-l-10{
                margin-left: 10px;
            }
            .margin-r-10{
                margin-right: 10px;
            }
            .page-list{         
                .box{
                    font-family: DINAlternate-Bold;
                    font-size: 14px;
                    color: #7F88A3;
                    letter-spacing: 0;
                    line-height: 14px;
                    margin-right: 20px;
                    cursor: pointer;
                    &:first-child{
                        margin-left: 20px;
                    }
                    &-active{
                        font-family: DINAlternate-Bold;
                        font-size: 14px;
                        color: #896EFF;
                        letter-spacing: 0;
                        text-align: center;
                        line-height: 14px;
                        text-shadow: 0 0 8px #5456E2;
                    }
                }
            }
        }
    }
    </style>

    2. 使用:

    <NewPagination :currentPage='pageNum' :total="total" :pageSize="pageSize"
                        @currentChange='currentChange'></NewPagination>

     

    展开全文
  • vue手动封装分页组件

    千次阅读 2020-12-17 19:57:02
    单独封装一个分页组件,进行全局注册,在需要使用的组件中进行引入,达到复用提高效率 1. total,总条数 (外部使用Pagination组件的区域传递进来的数据) 2. pageSize,每页显示多少条(外部使用Pagination组件的区域传递...
  • 今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。接下来本文通过实例代码给大家介绍100行代码实现一个vue分页功能,感兴趣的朋友跟随小编一起看看吧
  • 主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 封装table带分页

    2020-05-25 18:52:53
    1. 组件页面代码 <template> <div class="dashboard-container"> <div class="table-wrap"> <el-table :data="data.list" border stripe ... :show-summary="showSumm
  • ssm+vue实现分页功能

    2021-08-13 12:51:39
    为了方便大家练习,项目没有过多的代码,只有与分页相关的代码,而且分页功能使用的是PageHelper插件,所以实现分页功能超级简单。相关操作步骤及思路: 1、pom.xml文件引入PageHelper的jar包坐标 2、spring配置...
  • vue3项目封装分页组件

    2021-07-29 23:32:06
    效果 基础布局 <template> <div class="xtx-pagination"> <a href="javascript:;" class="disabled">上一页</a> <span>...</span> <a href="javascript:;..."&g.
  • 基于vue+elementUI开发的分页组件,后端项目配置使用PageHelper,前端配合使用此组件。
  • 主要介绍了Vue开发之封装分页组件与使用,结合实例形式分析了vue.js封装分页组件操作以及使用组件进行分页的相关实现技巧,需要的朋友可以参考下
  • antdesgin vue +ts +vue3.0 分页器的封装
  • 最近新做项目前端要用到分页查询,如果不进行封装的话,代码过于冗余,所以进行了封装,可以跳转界面,修改每页显示数量 封装的js代码如下 (function (vue) { // html模板信息 var template = '<div class=...
  • vue axios封装 axios 请求

    2020-03-27 15:04:31
    vue axios封装 axios 请求
  • vue自己封装一个分页组件

    千次阅读 2019-08-20 10:26:22
    1、新建文件pagination.vue。简单解释下:先写DOM结构和样式,接着是事件。 写事件很简单,点击按钮改变页码,并传递页码信息给父级。 传递进来的参数需要接收,并赋值给当前组件。 <template> <div ...
  • 之前使用的是element-ui二次封装后的分页,然后这里是自己单独写的一个分页组件 ...简单分页封装vue3.0) --> <template> <div class="pagtion" v-if="isShow"> <ul class="page_ul">
  • Vue项目分页组件封装

    2021-05-15 11:39:29
    解决单页面存在多个分页的情况 调用 <cview-paginator size="5" total="20" currentPage="1" @on-change="changePage($event, 1)" > </cview-paginator> <script> import ...
  • vue+iview的分页组件封装 1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer {...
  • 结合iview组件封装的一个分页功能组件,点击下一页上一页,每页显示条数,切换对应的数据
  • 目的:封装一个统一的分页组件,方便复用。 分页的本质:分批次查询数据(基于页码page和每页条数pagesize),后端接收到分页参数后,会基于这些参数查询数据库,然后基于数据库进行分页:基于SQL语句(select * from...
  • vue element-ui之分页组件的封装

    万次阅读 2019-05-21 22:54:49
    为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载、图片分批次加载等,都会用到分页组件。 这里以表格为例,通常我们写一个分页展示的...
  • Vue3封装 page 分页组件

    2021-09-24 21:09:39
    Vue3封装 page 分页组件 实现效果 分页组件封装 page.vue <template> <div class="pagination"> <a @click='changePage(false)' href="javascript:;">上一页</a> <span v-if='...
  • vue封装分页组件

    2018-10-15 16:10:00
    element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求 分页组件 <!--分页组件--> <template> <el-pagination @size-change=...
  • vue分页功能实现

    千次阅读 2020-10-09 18:50:08
    今天有人问我怎么用vue实现分页功能,我开始觉得这不是后端的事吗?怎么我们前端也要干了,而且现在怎么多UI库,比如Element-ui,我觉得这是个很好的前端UI库啊。不过既然有人问了,我就写写吧。 这是我的HTML代码 ...
  • 在src下面新建utils文件夹,然后再新建rquest.js,然后开始封装 /** * ajax请求配置 */ import axios from 'axios' import { Message } from 'element-ui' // axios默认配置 axios.defaults.timeout = 10000 //...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,165
精华内容 2,466
关键字:

vue封装分页功能

vue 订阅