当前位置 博文首页 > hibiscusxin的博客:vue-element的分页el-pagination

    hibiscusxin的博客:vue-element的分页el-pagination

    作者:[db:作者] 时间:2021-08-30 12:56

    vue-element的分页

    1、

    在这里插入图片描述

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formInline.page"
        :page-sizes="num"
        :page-size="formInline.size"
        layout="sizes, prev, pager, next"
        :total="total">
    </el-pagination>
    
    export default {
        data() {
            return {
                formInline: {
                page: 1,
                size: 10
              },
              num: [10, 20, 30, 40, 50],
              total: 0
            }
        },
        methods: {
            // 改变每页条数
            handleSizeChange(val) {
              this.formInline.size = val
              this.getList()
            },
            // 改变当前页数
            handleCurrentChange(val) {
              this.formInline.page = val
              this.getList()
            },
            // 获取列表信息
            getList() {
    	      this.loading = true
              User.searchList(this.formInline).then(res => {
                if (res.success) {
                  this.dataList = res.data
                  this.total = res.total
                  this.loading = false
                }
              }).catch(() => {
                this.loading = false
              })
        	}
    	}
    }
    

    2、在这里插入图片描述

    <el-pagination
        v-show="total > 0"
        :page-size="formInline.size"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
     />
    
    export default {
        data() {
            return {
               formInline: {
                   page: 1,
                   size: 10
               }
            }
        },
        methods: {
            // 改变当前页数
            handleCurrentChange(val) {
              this.formInline.page = val
              this.getList()
            }
        }
    }
    
    cs