Crud 模块

默认分页

分页 - 图1

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

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