• 分页
    • 普通用法
    • 自定义分页

    分页

    TIP

    1.0.0+

    普通用法

    分页 - 图1

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

    1. <avue-crud
    2.   :data="data"
    3.   :option="option"
    4.   :page="page"
    5.   @on-load="onLoad"
    6. ></avue-crud>
    8. <script>
    9.   export default {
    10.     data() {
    11.       return {
    12.         page: {
    13.           pageSize: 20
    14.         },
    15.         data: [],
    16.         option: {
    17.           align: 'center',
    18.           menuAlign: 'center',
    19.           column: [
    20.             {
    21.               label: '姓名',
    22.               prop: 'name'
    23.             },
    24.             {
    25.               label: '性别',
    26.               prop: 'sex'
    27.             }
    28.           ]
    29.         }
    30.       }
    31.     },
    32.     methods: {
    33.       onLoad(page) {
    34.         this.$message.success('分页信息:' + JSON.stringify(page))
    35.         this.page.total = 40
    36.         //模拟分页
    37.         if (page.currentPage === 1) {
    38.           this.data = [
    39.             {
    40.               name: '张三',
    41.               sex: '男'
    42.             }
    43.           ]
    44.         } else if (page.currentPage == 2) {
    45.           this.data = [
    46.             {
    47.               name: '李四',
    48.               sex: '女'
    49.             }
    50.           ]
    51.         }
    52.       }
    53.     }
    54.   }
    55. </script>

    自定义分页

    分页 - 图2

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

    1. <avue-crud
    2.   :data="data"
    3.   :option="option"
    4.   :page="page"
    5.   @size-change="sizeChange"
    6.   @current-change="currentChange"
    7. ></avue-crud>
    9. <script>
    10.   export default {
    11.     data() {
    12.       return {
    13.         page: {
    14.           //pageSizes: [10, 20, 30, 40],默认
    15.           currentPage: 1,
    16.           total: 0,
    17.           pageSize: 10
    18.         },
    19.         data: [
    20.           {
    21.             name: '张三',
    22.             sex: '男'
    23.           },
    24.           {
    25.             name: '李四',
    26.             sex: '女'
    27.           }
    28.         ],
    29.         option: {
    30.           align: 'center',
    31.           menuAlign: 'center',
    32.           column: [
    33.             {
    34.               label: '姓名',
    35.               prop: 'name'
    36.             },
    37.             {
    38.               label: '性别',
    39.               prop: 'sex'
    40.             }
    41.           ]
    42.         }
    43.       }
    44.     },
    45.     created() {
    46.       this.getList()
    47.     },
    48.     methods: {
    49.       getList() {
    50.         this.page.total = 20
    51.         if (this.page.currentPage === 1) {
    52.           this.data = [
    53.             {
    54.               name: '张三',
    55.               sex: '男'
    56.             }
    57.           ]
    58.         } else if (this.page.currentPage == 2) {
    59.           this.data = [
    60.             {
    61.               name: '李四',
    62.               sex: '女'
    63.             }
    64.           ]
    65.         }
    66.       },
    67.       sizeChange(val) {
    68.         this.page.currentPage = 1
    69.         this.page.pageSize = val
    70.         this.getList()
    71.         this.$message.success('行数' + val)
    72.       },
    73.       currentChange(val) {
    74.         this.page.currentPage = val
    75.         this.getList()
    76.         this.$message.success('页码' + val)
    77.       }
    78.     }
    79.   }
    80. </script>