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   苏舒  阅读(903)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示