ZSWYD

element-ui分页器简单使用

  1. 引入element-ui
  2. 写入标签
	<el-pagination
		//每页的条数
	   @size-change="handleSizeChange"
	   //当前页
	   @current-change="handleCurrentChange"
	   //当前页数
	   :current-page.sync="currentPage2"
	   :page-sizes="[100, 200, 300, 400]"
	   :page-size="100"``
	   //按钮
	   layout="sizes, prev, pager, next"
	   //总条数
	   :total="1000">
	</el-pagination>

事件
image


          <el-pagination
            @prev-click="prePage"
            @next-click="nextPage"
            @current-change="handleCurrentChange"
            :current-page.sync="queryParams.pageNum"
            layout="prev, pager, next, jumper"
            :total="totalPage">
          </el-pagination>
    //分页器事件
    //前进
    prePage(){
      this.queryParams.pageNum -= 1
      console.log(this.queryParams.pageNum,'前进')
      this.queryCrouse()
    },
    //后退
    nextPage(){
      this.queryParams.pageNum += 1
      console.log(this.queryParams.pageNum,'后退')
      this.queryCrouse()
    },
    //直接输页码跳转
    handleCurrentChange(val){
      this.queryParams.pageNum = val
      this.queryCrouse()
    }

posted on 2022-09-06 23:54  苏舒  阅读(939)  评论(0)    收藏  举报

导航