vue分页组件

vue分页组件

1.普通分页组件
html部分

<el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.current" :page-sizes="[10, 20, 30, 40]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

data部分

total: 0,
page: {
       pageSize: 10,
       current: 1,
       filterContent: {
          参数1：' '，
        }
},

js部分

handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getTable(val);  
        },
        handleCurrentChange(item,val) {
            console.log(`当前页: ${val}`);
            this.page.current = val;
            this.getTable(val);
         },

2.分页组件切换页面触发事件 @size-change与@current-change传参
注意：@size-change="handleSizeChange(item, val)"写法无效
html部分

 @size-change="(val) => handleSizeChange(item, val)" 
 @current-change="(val) => handleCurrentChange(item, val)" 

js部分

handleSizeChange(item,val) {
            console.log(`每页 ${val} 条`);
            this.page.pageSize = val;
            this.TabClick(item);
        },
        handleCurrentChange(item,val) {
            console.log(`当前页: ${val}`);
            this.page.current = val;
            this.TabClick(item);
        },