vue-element的分页el-pagination

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()
        }
    }
}