精华内容
下载资源
问答
  • Vue项目分页组件封装
    2021-05-15 11:39:29

    解决单页面存在多个分页的情况

    • 调用
     <cview-paginator
         size="5"
         total="20"
         currentPage="1"
         @on-change="changePage($event, 1)"
     >
     </cview-paginator>
     <script>
    	import CiewPaginator from '@/component/paginator.vue'
    	export default {
    	    mixins: [],
    	    components: {
    	        CiewPaginator
    	    },
    	    props: {},
    	    data() {
    	        return {
    	           
    	        }
    	    },
    	    computed: {},
    	    created() {},
    	    mounted() {
    	        
    	    },
    	    methods: {
    	    	changePage(e, index) {
    	            console.log(e, index)
    	        }
    		}
    	}
     </script>
    

    组件完整代码:

    • paginator.vue
    <template name="cview-paginator">
    	<div class="cvu-paginator">
    		<div class="cvu-paginator-warp">
                <span class="cvu-paginator-font" @click.stop="_changeClick('first')">首页</span>
                <span class="cvu-paginator-font" @click.stop="_changeClick('pre')">上一页</span>
                <span class="cvu-paginator-font" @click.stop="_changeClick('next')">下一页</span>
                <span class="cvu-paginator-font" @click.stop="_changeClick('last')">尾页</span>
                <span class="cvu-paginator-font">
                    <span>转到</span>
                    <input type="text" class="cvu-paginator-input" v-model="page" @keyup.enter="_enterPage(page)" @input="_changeInput(page)">
                    <span></span>
                </span>
                <span class="cvu-paginator-font">当前{{ page }}/{{ pageTotal }}</span>
                <span class="cvu-paginator-font">共{{ total }}条记录</span>
            </div>
    	</div>
    </template>
    
    <script>
    /* _XXX()函数仅组件内部使用 */
    export default {
        name: 'cview-paginator',
        components: {},
        props: {
            // 当前页数
            currentPage: {
                type: Number,
                required: true
            },
            // 每页条数
            size: {
                type: Number,
                default: 10
            },
            // 总条数
            total: {
                type: Number,
                required: true
            }
        },
        data() {
            return {
                page: 1,
                pageTotal: 1
            }
        },
        watch: {
            // 观察page页码变化
            page: {
                handler(newVal) {
                    this.pageTotal = Math.ceil(this.total / this.size)
                },
                immediate: true,
                deep: true
            },
            // 观察currentPage当前页配置变化
            currentPage: {
                handler(newVal) {
                    this.page = ~~newVal
                },
                immediate: true,
                deep: true
            },
            // 观察total总条数变化
            total: {
                handler(newVal) {
                    this.pageTotal = Math.ceil(this.total / this.size)
                },
                immediate: true,
                deep: true
            }
        },
        methods: {
            // 按钮点击监听
            _changeClick(code) {
                switch (code) {
                case 'first': // 首页
                    this.page = 1
                    this.$emit('on-change', {
                        page: this.page
                    })
                    break;
                case 'pre': // 上一页
                    if(this.page > 1) {
                        this.page = ~~this.page - 1
                        this.$emit('on-change', {
                            page: this.page
                        })
                    }
                    break;
                case 'next': // 下一页
                    if(this.page < this.pageTotal) {
                        this.page = ~~this.page + 1
                        this.$emit('on-change', {
                            page: this.page
                        })
                    }
                    break;
                case 'last': // 尾页
                    this.page = this.pageTotal
                    this.$emit('on-change', {
                        page: this.page
                    })
                    break;
                default:
                    break;
                }
            },
            // 输入监听 (控制输入数字的不小于0,不大于最大页码)
            _changeInput(value) {
                if(~~value > this.pageTotal) {
                    this.page = this.pageTotal
                }
                if(~~value > 0 && ~~value <= this.pageTotal) {
                    this.page = ~~value
                }
                if(~~value < 0) {
                    this.page = 1
                }
            },
            // 回车键页码跳转
            _enterPage(value) {
                this.page = ~~value
                this.$emit('on-change', {
                    page: this.page
                })
            }
        }
    }
    </script>
    
    <style lang="scss" scoped>
    @import '../../../style/_index.scss';
    .cvu-paginator{
        display: inline-block;
        text-align: right;
        height: 50px;
        line-height: 50px;
        .cvu-paginator-warp{
            display: flex;
            align-items: center;
            .cvu-paginator-font{
                margin-left: 10px;
                cursor: pointer;
                color: #999;
                font-size: 12px;
                user-select: none;
            }
            .cvu-paginator-input {
                display: inline-block;
                width: 50px;
                height: 24px;
                line-height: 1.5;
                margin: 0 5px;
                padding: 4px 7px;
                background-color: #fff;
                border: 1px solid #dcdee2;
                border-radius: 4px;
                cursor: text;
                user-select: none;
                outline: none;
                -webkit-transition: border .2s ease-in-out,background .2s ease-in-out,-webkit-box-shadow .2s ease-in-out;
                transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out,-webkit-box-shadow .2s ease-in-out;
                color: #515a6e;
                font-size: 12px;
            }
        }
    }
    </style>
    
    更多相关内容
  • Vue 分页组件封装

    2022-05-12 20:36:24
    这个是基于vue2的分页封装,仿照elementUI而写的组件。 效果如图 话不多说,直接上代码 <template> <div class="pagination"> <!-- 总页数 --> <div class="total">共{{ total }...

    前言

    这个是基于vue2的分页封装,仿照elementUI而写的组件。

    效果如图

     话不多说,直接上代码

    <template>
      <div class="pagination">
        <!-- 总页数 -->
        <div class="total">共{{ total }}条</div>
        <!-- 选择每页的条数 -->
        <select name="" id="size_select" v-model="sizes" @change="sizeChange">
          <option v-for="item in pageSizes" :key="item" :value="item">
            {{ item }}条/页
          </option>
        </select>
        <div class="pagenum">
          <!-- 上一页 -->
          <el-button
            icon="el-icon-arrow-left"
            :disabled="backDisabled"
            circle
            @click="back"
          ></el-button>
          <!-- 页码 -->
          <ul>
            <li
              :class="currentPage == item ? 'active' : ''"
              v-for="(item, index) in pagenum"
              :key="index"
              @click="toPage(item)"
            >
              {{ item }}
            </li>
          </ul>
          <!-- 下一页 -->
          <el-button
            icon="el-icon-arrow-right"
            :disabled="forwardDisabled"
            circle
            @click="forward"
          ></el-button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "pagination",
      props: {
        total: {  // 总数
          type: null,
          required: true,
        },
        pageSizes: { // 可选择的每页条数
          type: Array,
        },
        pageSize: {  // 每页显示的条数
          type: Number,
          required: true,
        },
        currentPage: { // 当前页
          type: Number,
          required: true,
        },
      },
      data() {
        return {
          sizes: this.pageSize,  // 接收props传来的pageSize
          nowPage: this.currentPage,  // 接收props传来的currentPage
        };
      },
      computed: {
        allPage() {  // 计算所有的页数
          return Math.ceil(this.total / this.pageSize);
        },
        backDisabled() {  // 是否禁用上一页
          return this.currentPage == 1;
        },
        forwardDisabled() { // 是否禁用下一页
          return this.currentPage == this.allPage;
        },
        pagenum() {   // 计算显示不同的页
          if (this.allPage - this.nowPage > 6) {  //  
            if (this.nowPage > 6) {
              return [
                1,
                "...",
                this.nowPage - 2,
                this.nowPage - 1,
                this.nowPage,
                this.nowPage + 1,
                this.nowPage + 2,
                "...",
                this.allPage,
              ];
            } else {
              if (this.allPage > 8) {
                return [1, 2, 3, 4, 5, 6, "...", this.allPage];
              } else {
                return this.allPage;
              }
            }
          } else {
            if (this.nowPage < 6) {
              return this.allPage;
            } else {
              return [
                1,
                "...",
                this.allPage - 5,
                this.allPage - 4,
                this.allPage - 3,
                this.allPage - 2,
                this.allPage - 1,
                this.allPage,
              ];
            }
          }
        },
      },
      methods: {
        sizeChange() {  // 每页限制条数改变触发事件
          this.$emit("sizeChange", this.sizes);
        },
        forward() {  // 点击下一页
          this.$emit("currentChange", (this.nowPage += 1));
        },
        back() {  // 点击上一页
          this.$emit("currentChange", (this.nowPage -= 1));
        },
        toPage(val) {  // 点击页数
          if (val == "...") {
            console.log(2);
          } else {
            this.nowPage = val;
            this.$emit("currentChange", val);
          }
        },
      },
    };
    </script>

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

    2020-12-15 13:52:16
    vue分页组件封装 座右铭:越努力越幸运,越运动越健康。热爱前端技术,热爱运动的(爱笑,傻傻的)这样一个人 文章目录vue分页组件封装父传子的封装(发射)使用sync修饰符(直接操作符,不用发射) 父传子的封装...

    vue分页组件封装

    座右铭:越努力越幸运,越运动越健康。
    热爱前端技术,热爱运动的(爱笑,傻傻的)这样一个人



    用父传子进行封装(发射)

    //封装
    <template>
      <nav aria-label="Page navigation" style="text-align: center;">
        <ul class="pagination">
          <!-- 上一页 -->
          <li @click="prePage()" :class="pageNo<=1?'disabled':''">
            <a aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <!-- 遍历总页数 -->
          <li
            :class="pageNo == index ?'active':''"
            v-for="index in pages"
            :key="index"
            @click="curPage(index)"
          >
            <a>{{index}}</a>
          </li>
          <!-- 下一页 -->
          <li @click="nextPage()" :class="pageNo>=pageTotal?'disabled':''">
            <a aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </template>
    
    <script>
    export default {
      data() {
        return {
          curNo: 1
        };
      },
      props: ["pageTotal", "pageNo"], //父-子 pageTotal总页数  pageNo当前页
      created() {
        this.curNo = this.pageNo;  //为了避免一些错误,不让子来操作当前页
      },
      computed: {  //对页码的要求
        pages() {
          let s = this.pageNo;
          let n = this.pageTotal;
          if (n < 10) return n; //总页数小于10,不添加...
          if (s <= 5) {
            return [1, 2, 3, 4, 5, 6, 7, "...", n];
          } else if (s >= n - 5) {
            //页码大于总页数-5
            return [1, "...", n - 6, n - 5, n - 4, n - 3, n - 2, n - 1, n];
          } else {
            return [1, "...", s - 2, s - 1, s, s + 1, s + 2, "...", n];
          }
        }
      },
      methods: {
        //当前页
        curPage(i) {
           if (i == "...") return;
          this.$emit('e-child',i);
          // if (i == "...") return;
          // this.$emit("update:pageNo", i);
        },
        //上一页
        prePage() {
          if (this.pageNo > 1) {
            this.$emit('e-child',--this.curNo );
            // this.$emit("update:pageNo", --this.curNo);
          }
        },
        //下一页
        nextPage() {
          if (this.pageNo < this.pageTotal) {
            this.$emit('e-child',++this.curNo );
            // this.$emit("update:pageNo", ++this.curNo);
          }
        }
      }
    };
    //调用api
    //例如:<Pagination  :pageTotal = "page.pageTotal"  :pageNo="page.pageNo" @e-child="getLists" />
    /*需要传递的参数
    *1.pageTotal  总页数
    *2.pageNo  当前页
    *3.接收发射过来的参数:getLists ,getLists为发送请求分页的方法
    */ 
    </script>
    
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    使用sync修饰符(直接操作符,不用发射)

    <template>
      <nav aria-label="Page navigation" style="text-align: center;">
        <ul class="pagination">
          <!-- 上一页 -->
          <li @click="prePage()" :class="pageNo<=1?'disabled':''">
            <a aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <!-- 遍历总页数 -->
          <li
            :class="pageNo == index ?'active':''"
            v-for="index in pages"
            :key="index"
            @click="curPage(index)"
          >
            <a>{{index}}</a>
          </li>
          <!-- 下一页 -->
          <li @click="nextPage()" :class="pageNo>=pageTotal?'disabled':''">
            <a aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </template>
    
    <script>
    export default {
      data() {
        return {
          curNo: 1
        };
      },
      props: ["pageTotal", "pageNo"], //父-子 pageTotal总页数  pageNo当前页
      created() {
        this.curNo = this.pageNo;  //为了避免一些错误,不让子来操作当前页
      },
      computed: {  //对页码的要求
        pages() {
          let s = this.pageNo;
          let n = this.pageTotal;
          if (n < 10) return n; //总页数小于10,不添加...
          if (s <= 5) {
            return [1, 2, 3, 4, 5, 6, 7, "...", n];
          } else if (s >= n - 5) {
            //页码大于总页数-5
            return [1, "...", n - 6, n - 5, n - 4, n - 3, n - 2, n - 1, n];
          } else {
            return [1, "...", s - 2, s - 1, s, s + 1, s + 2, "...", n];
          }
        }
      },
      methods: {
        //当前页
        curPage(i) {
          //  if (i == "...") return;
          // this.$emit('e-child',i);
          if (i == "...") return;
          this.$emit("update:pageNo", i);
        },
        //上一页
        prePage() {
          if (this.pageNo > 1) {
            // this.$emit('e-child',--this.curNo );
            this.$emit("update:pageNo", --this.curNo);
          }
        },
        //下一页
        nextPage() {
          if (this.pageNo < this.pageTotal) {
            // this.$emit('e-child',++this.curNo );
            this.$emit("update:pageNo", ++this.curNo);
          }
        }
      }
    };
    //注意!!!!!!!父组件中监听
    //使用sync修饰符封装还需要监听当前页的变化,需要新的当前页才发生变化
    watch:{  //监听pageNo
        'page.pageNo'(newValue,oldValue){
        //getLists为发送请求分页的方法
          this.getLists(newValue);
        }
      },
    </script>
    //调用api
    //例如:<Pagination  :pageTotal = "page.pageTotal"  :pageNo.sync="page.pageNo" /> 
    /*需要传递的参数
    *1.pageTotal  总页数
    *2.pageNo  当前页 使用sync修饰符
    */ 
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 主要介绍了Vue开发之封装分页组件与使用,结合实例形式分析了vue.js封装分页组件操作以及使用组件进行分页的相关实现技巧,需要的朋友可以参考下
  • 主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • ##vue element分页组件封装并使用 第一步在components文件家里新建分页组件 <template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background=...

    ##vue element分页组件的封装并使用
    第一步在components文件家里新建分页组件
    在这里插入图片描述

    <template>
      <div :class="{'hidden':hidden}" class="pagination-container">
        <el-pagination
          :background="background"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :layout="layout"
          :page-sizes="pageSizes"
          :pager-count="pagerCount"
          :total="total"
          v-bind="$attrs"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>
    
    <script>
    import { scrollTo } from '@/utils/scroll-to'
    
    export default {
      name: 'Pagination',
      props: {
        total: {
          required: true,
          type: Number
        },
        page: {
          type: Number,
          default: 1
        },
        limit: {
          type: Number,
          default: 20
        },
        pageSizes: {
          type: Array,
          default() {
            return [10, 20, 30, 50]
          }
        },
        // 移动端页码按钮的数量端默认值5
        pagerCount: {
          type: Number,
          default: document.body.clientWidth < 992 ? 5 : 7
        },
        layout: {
          type: String,
          default: 'total, sizes, prev, pager, next, jumper'
        },
        background: {
          type: Boolean,
          default: true
        },
        autoScroll: {
          type: Boolean,
          default: true
        },
        hidden: {
          type: Boolean,
          default: false
        }
      },
      computed: {
        currentPage: {
          get() {
            return this.page
          },
          set(val) {
            this.$emit('update:page', val)
          }
        },
        pageSize: {
          get() {
            return this.limit
          },
          set(val) {
            this.$emit('update:limit', val)
          }
        }
      },
      methods: {
        handleSizeChange(val) {
          this.$emit('pagination', { page: this.currentPage, limit: val })
          if (this.autoScroll) {
            scrollTo(0, 800)
          }
        },
        handleCurrentChange(val) {
          this.$emit('pagination', { page: val, limit: this.pageSize })
          if (this.autoScroll) {
            scrollTo(0, 800)
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .pagination-container {
      background: #fff;
      padding: 32px 16px;
    }
    .pagination-container.hidden {
      display: none;
    }
    </style>
    
    

    第二步
    main.js里面引入,并全局注册组件

    // 分页组件
    import Pagination from "@/components/Pagination";
    
    // 全局组件挂载
    Vue.component('Pagination', Pagination)
    

    第三步
    然后在你使用的页面使用组件就行啦,,,

    <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"//总条数
          :page.sync="queryParams.page"//当前页
          :limit.sync="queryParams.size"//当前页的条数
          @pagination="getList"//getList是你初始化请求列表的方法
        />
    
    展开全文
  • 一、封装分页组件的时候:需要知道哪些条件? 分页组件需要知道我一共展示多少条数据 ----total【100条数据】 每一个需要展示几条数据------pageSize【每一页3条数据】 需要知道当前在第几页-------pageNo[当前...
  • 今天封装一个常用的组件 Pagination 分页 因为是 Ant Design Vue组件,所以必须安装Ant Design Vue才能使用哦~ 使用组件(可参考Ant Design Vue 快速上手): $ npm i --save ant-design-vue 第一步:首先...
  • 文件page.vue为一个pc端的分页组件,基础的分页功能都有,基本的思路是,页面是用数据来展示的,那就直接操作相关数据来改变视图
  • 之前使用的是element-ui二次封装后的分页,然后这里是自己单独写的一个分页组件 Paging.vue 在这里插入代码片 在这里插入代码片 在这里插入代码片 在这里插入代码片sss <scritp></script> <!-- ...
  • vue自己封装一个分页组件

    千次阅读 2019-08-20 10:26:22
    1、新建文件pagination.vue。简单解释下:先写DOM结构和样式,接着是事件。 写事件很简单,点击按钮改变页码,并传递页码信息给父级。 传递进来的参数需要接收,并赋值给当前组件。 <template> <div ...
  • 文章目录vue2.x ElementUI 分页组件封装1、Pagination.vue2、组件的使用3、扩展(工具函数 scrollTo) vue2.x ElementUI 分页组件封装 1、Pagination.vue /** * 分页组件 * @param currentPage 当前页 * @param ...
  • Vue3自己封装一个分页组件

    千次阅读 2022-03-25 21:12:08
    为什么要封装分页组件 分页功能使用场景较多,故考虑封装为全局组件 自己封装成本较低,需要什么功能就添加什么功能 相对使用现成组件库,自己封装代码体积可控 如何封装分页组件 第一步组件所需参数: total ...
  • 晚上好。今天封装一个分页组件
  • 目的:封装一个统一的分页组件。 分页的本质:分批次查询数据(基于页码page和每页条数pagesize),后端接收到分页参数后,会基于这些参数查询数据库,然后基于数据库进行分页:基于SQL语句(select * from user ...
  • 使用Vue做双向绑定的时候,可能经常会用到分页功能,接下来通过本文给大家分享一个封装分页组件的方法,一起看看吧
  • vue3项目封装分页组件

    2021-07-29 23:32:06
    效果 基础布局 <template> <div class="xtx-pagination"> <a href="javascript:;" class="disabled">上一页</a> <span>...</span> <a href="javascript:;..."&g.
  • 本文主要介绍Vue2.0如何封装分页查询的组件 一、业务场景 1.1适用于Vue,PC端使用的小伙伴,养成封装的习惯,可以方便你我他。 1.2案例展示图 二、完整代码 2.1组件页面 在src\components目录下创建Pager.vue <...
  • vue+iview的分页组件封装 1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer {...
  • 父子组件的方式2.混入的方式 1.父子组件的方式   新建一个名为Pagenation的组件,代码如下: <template> <div v-show="pages.total > pages.pageSize"> <el-pagination @size-change=...
  • Vue3+ElementPlus 表格分页组件封装

    千次阅读 2021-08-02 10:39:03
    第一步新建公共组件pagination.vue <template> <!-- 分页 --> <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" :page-sizes="[10, 30, ...
  • Vue+Element组件封装

    2021-01-08 07:54:06
    使用element经常需要用表格展示数据,对表格...主要涉及的组件有el-table、el-dropdown(控制每页展示条目数)、el-pagination(table分页)、el-input(搜索框)。 效果预览 原创文章 23获赞 24访问量 6万+ 关注 私
  • vue element-ui之分页组件封装

    万次阅读 2019-05-21 22:54:49
    为什么要封装分页组件分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载、图片分批次加载等,都会用到分页组件。 这里以表格为例,通常我们写一个分页展示的...
  • 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 2 3 4 5 ... 20
收藏数 5,002
精华内容 2,000
关键字:

vue分页组件封装

友情链接: SerialCom.zip