vue2.0自定义分页组件

朴灿烈づ我的快乐病毒、 2023-01-12 11:37 153阅读 0赞

vue2.0自定义分页组件  
显示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzZzc3_size_16_color_FFFFFF_t_70]  
调用分页组件的方法

<div class="data-page">
          <div>
            <el-pagination
              background
              layout="sizes,prev, pager, next"
              :total="page.total"
              :page-sizes="[5,10, 15, 20, 50]"
              :current-page.sync="page.pageNum"
              :page-size.sync="page.pageSize"
              @size-change="init"
              @current-change="init"
            />
    
            <pageBar
            :total.sync="page.total"              
            :pageNum.sync="page.pageNum"
            :pageSize="page.pageSize"
            :color="page.color"
            :changePageNum="changePageNum"
            :refreshData="init">
            </pageBar>
    
       </div>
    </div>
    //导入分页栏组件
    import pageBar            from '@/components/table_ex/cwgisPageBar';
    //
    export default{
        
    components: {
            
        pageBar,
    },
    data() {
        
        return {
        
          tableData: [],
          searchValue:'',
          page: {
                
            count: 3,     //总页数
            total: 15,    //总个数
            pageSize: 5,  //每页个数
            pageNum: 1,   //当前页
            color:'000000',
            //
          },
          //
        };
      },
      methods: {
        
          changePageNum(t_pageNum)
          {
        
              this.page.pageNum=t_pageNum;
          },
          init() 
          {
        
    	      var that = this;
    	      var userAcc = api.getLoginAccount();
    	      var userName = api.getLoginName();
    	      //
    	      //组合查询sql语句
    	      var sql = "select * from xc_wg_wgxx ";
    	      if(that.searchValue && that.searchValue!="")
    	      {
        
    	          sql+=" where mc like '%"+that.searchValue+"%'";
    	      }
    	      sql+=" order by id desc";
    	      //
    	      api.getDataPage_sql(
    	        sql,
    	        this.page.pageSize,
    	        this.page.pageNum,
    	        function (r) {
        
    	          // debugger;
    	          if (r.success) {
        
    	            that.tableData = r.data.rows;
    	            that.page.total = r.data.total;
    	          } else {
        
    	            alert(r.msg);
    	          }
    	        }
    	      );
          },    
      }
    }

自定义的分页组件cwgisPageBar.vue

<template>
      
      <div>
        <img :src="haseFirst? 'images/pagebar/first.png':'images/pagebar/first_h.png'" @click="gotoFirstPage" :style="firstSylye">
        <img :src="haseFirst? 'images/pagebar/pre.png':'images/pagebar/pre_h.png'" @click="pageSub" :style="firstSylye">
        <input ref="refindex" type="text" v-model="pageNum" @blur="checkpageTemIndex">
        <span> / {
        {
        count}}页 总{
        {
        total}}</span>
        <img :src="haseLast? 'images/pagebar/next.png':'images/pagebar/next_h.png'" @click="pageAdd" :style="lastSylye">
        <img :src="haseLast? 'images/pagebar/last.png':'images/pagebar/last_h.png'" @click="gotoEndPage" :style="lastSylye">
      </div>
    </template>
    
    <script>
      export default {
        
        name: "cwgisPageBar",
        props: ['page-sizes','total','pageSize','pageNum','refreshData','changePageNum','color'],
        data() {
        
          return {
        
            firstSylye:'',
            lastSylye:'',
            haseFirst:false, //第一页
            haseLast:false,  //最后一页
            //
            count:3,   //总页数
          }
        },
        watch: {
        
          'pageNum'() {
        
           this.checkPageIndex();
          },
          'count'() {
        
            this.checkPageIndex();
          },
          'total'() {
        
            this.totalChange();
          },
        },
        created() {
        
          // if (this.page) {
        
          //   this.pageTem = this.page;
          // }
          this.checkPageIndex();
        },
        mounted(){
        
            var t_color=this.color;
            if(!t_color)
            {
        
                t_color="000000";
            }
            this.$refs.refindex.style.color="#"+t_color;
        },
        methods: {
        
          gotoFirstPage()
          {
                 
             this.changePageNum(1);
             this.refreshData();
          },
          gotoEndPage()
          {
                 
             this.changePageNum(this.count);
             this.refreshData();
          },
          totalChange()
          {
        
              this.count = Math.ceil(this.total/this.pageSize);
              this.checkPageIndex();
          },
          checkpageTemIndex() {
        
            this.pageTemAdd(this.pageNum, 0);
            this.refreshData();
          },
          checkPageIndex(){
                
            this.haseFirst = this.pageNum > 1;
            this.haseLast = this.pageNum < this.count;
            if(this.haseFirst){
        
              this.firstSylye = 'cursor: pointer;';
            }else{
        
              this.firstSylye = 'cursor: not-allowed;';
            }
    
            if(this.haseLast){
        
              this.lastSylye = 'cursor: pointer;';
            }else{
        
              this.lastSylye = 'cursor: not-allowed;';
    
            }
            this.setInputWidth();
          },
          /**
           * 设置输入框宽度
           */
          setInputWidth() {
        
            let refindex = this.$refs.refindex;
            if( refindex && refindex.style){
        
              let width = (this.pageNum + "").length * 13;
              if (width > 30) {
        
                refindex.style.width = width + "px";
              }else{
        
                refindex.style.width = 30 + "px";
              }
            }
          },
          pageAdd()
          {
        
              this.pageTemAdd(this.pageNum,1);
          },
          pageSub()
          {
        
              this.pageTemAdd(this.pageNum,-1);
          },
          //页面相加 或者 相减
          pageTemAdd(index, num) {
        
            var t_num=this.pageNum;
            if (index * 1 + num * 1 >= this.count * 1) {
        
              t_num = this.count * 1;   //最大页数
            } else if (index * 1 + num * 1 <= 1) {
        
              t_num = 1;                //最小页数
            } else {
        
              t_num = this.pageNum * 1 + num * 1;   //中间页数
            }
            //this.pageNum=t_num; //单向传值 改为changePageNum来传值
            if(t_num!=this.pageNum)
            {
        
                this.changePageNum(t_num);
                this.refreshData();
            }
          }
        }
      }
    </script>
    
    <style scoped>
      img {
        
        margin-left: 14px;
        cursor: pointer;
    
      }
    
      input[type="text"] {
        
        width: 24px;
        text-align: center;
        height: 20px;
        border: 1px solid #FFFFFF;
        background: 0 0;
        color: #FFFFFF;
        margin-left: 14px;
      }
    </style>

—the—end—

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzZzc3_size_16_color_FFFFFF_t_70]: /images/20221119/41e51e1f4ba844eeb59350464d4fdbd6.png