vue 框架引入element翻页组件

1.表格里引入

 
< div class= "block" style= "padding-top: 20px;border: 1px solid #e0e6ed;text-align:right;padding-bottom:10px;" >
      < el-pagination @size-change=" handleSizeChange" @current-change=" handleCurrentChange" :current-page=" page. pageNo" :page-sizes="[ 10, 20, 30, 40]" :page-size=" page. pageSize" layout= "total, sizes, prev, pager, next, jumper" :total=" page. totalRecords" >
     </ el-pagination >
</ div >

2.参数声明(也可以在方法里声明)

data() {
         return {
page: {
                     pageNo: 1, //当前页
                     pageSize: 10, //每页条数, 默认10条
                     totalRecords: 0, //待办总条数
                     pageNo1: 1, //当前页
                     pageSize1: 10, //每页条数, 默认10条
                     totalRecords1: 0, //待办总条数
                },
                 tableHeight:document. body. offsetHeight - 350,
        };
    },


3.在methods方法里

methods: {
        
         //每页显示的数据条数
         handleSizeChange( val) {
             this. page. pageSize = val;
             this. getList();
        },
         //点击页数切换
         handleCurrentChange( val) {
             this. page. pageNo = val;
             this. getList();
        },
         //每页显示的数据条数
         handleSizeChange1( val) {
             this. page. pageSize1 = val;
             this. getList();
        },
         //点击页数切换
         handleCurrentChange1( val) {
             this. page. pageNo1 = val;
             this. getList();
        },

},

在方法调用时引入

getList() {
             let param = {
                 pagenum: this. page. pageNo,
                 pagesize: this. page. pageSize,
                 kssj: null,
                 jssj: null,
                 searchKey: this. searchKey,
                 xmmc: this. xmlb,
                 sfbfk: this. activeName,
                 sfgk: null

            }
             this. _getFeedList( param). then( data =>{
                 var resultData = JSON. parse( data);
                 if( resultData. status == 0) {
                     var da = resultData. result. list;
                     da. forEach( item => {
                         item. SFGK = item. SFGK == 1? '是': '否';
                         item. CLZT = item. CLZT == 1? '已处理': '未处理';
                    });
                     this. tableData = da;
                     this. page. totalRecords = resultData. result. totalRecords;
                     console. log( 787878, this. tableData)
                }
            })
        },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值