Crud 模块

默认分页

分页 - 图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>