分页

TIP

1.0.0+

普通用法

首次加载调用on-load方法加载数据，返回page分页对象信息,赋值page的total总条数即可

<avue-crud
  :data="data"
  :option="option"
  :page="page"
  @on-load="onLoad"
></avue-crud>
<script>
  export default {
    data() {
      return {
        page: {
          pageSize: 20
        },
        data: [],
        option: {
          align: 'center',
          menuAlign: 'center',
          column: [
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '性别',
              prop: 'sex'
            }
          ]
        }
      }
    },
    methods: {
      onLoad(page) {
        this.$message.success('分页信息:' + JSON.stringify(page))
        this.page.total = 40
        //模拟分页
        if (page.currentPage === 1) {
          this.data = [
            {
              name: '张三',
              sex: '男'
            }
          ]
        } else if (page.currentPage == 2) {
          this.data = [
            {
              name: '李四',
              sex: '女'
            }
          ]
        }
      }
    }
  }
</script>

自定义分页

实际的用法要后台配置，将后台返回值赋值给 page 中的属性， page就是分页对象注入，page 对象中的total为总页数，pageSizes为分页信息，currentPage为当前第几页，pageSize每一页加载多少条数据，点击页码会调用current-change方法回调当前页数，返回当前第几页，点击每页多少条会调size-change方法回调

<avue-crud
  :data="data"
  :option="option"
  :page="page"
  @size-change="sizeChange"
  @current-change="currentChange"
></avue-crud>
<script>
  export default {
    data() {
      return {
        page: {
          //pageSizes: [10, 20, 30, 40],默认
          currentPage: 1,
          total: 0,
          pageSize: 10
        },
        data: [
          {
            name: '张三',
            sex: '男'
          },
          {
            name: '李四',
            sex: '女'
          }
        ],
        option: {
          align: 'center',
          menuAlign: 'center',
          column: [
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '性别',
              prop: 'sex'
            }
          ]
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.page.total = 20
        if (this.page.currentPage === 1) {
          this.data = [
            {
              name: '张三',
              sex: '男'
            }
          ]
        } else if (this.page.currentPage == 2) {
          this.data = [
            {
              name: '李四',
              sex: '女'
            }
          ]
        }
      },
      sizeChange(val) {
        this.page.currentPage = 1
        this.page.pageSize = val
        this.getList()
        this.$message.success('行数' + val)
      },
      currentChange(val) {
        this.page.currentPage = val
        this.getList()
        this.$message.success('页码' + val)
      }
    }
  }
</script>