# 分页

TIP

2.6.3+

# 页码和条数

页码:1

条数:10

总数:1000

currentPage当前页码,total总条数,pageSize每页多少条数据

<p>
页码:{{page.currentPage}}
<el-button type="small" @click="page.currentPage=page.currentPage+1">页码+1</el-button>
</p>
<p>
条数:{{page.pageSize}}
<el-button type="small" @click="page.pageSize=page.pageSize+10">条数+10</el-button>
</p>
<p>
总数:{{page.total}}
<el-button type="small" @click="page.total=page.total+10">总页数+10</el-button>
</p>
<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>

<script>
  export default {
    data() {
      return {
        page:{ 
          total: 1000, 
          currentPage: 1, 
          pageSize: 10
        },
        data: [],
        option: {
          header:false,
          height:150,
          column:[{
            label:'姓名',
            prop:'name'
          }]
        }
      }
    }
  }
</script>
Expand Copy

# 设置最大页码按钮数

pagerCount属性默认为7

<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>

<script>
  export default {
    data() {
      return {
        page:{
          pagerCount:11,
          total:1000
        },
        data: [],
        option: {
          header:false,
          height:150,
          column:[{
            label:'姓名',
            prop:'name'
          }]
        }
      }
    }
  }
</script>
Expand Copy

# 无背景色的分页

background属性默认为true

<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>

<script>
  export default {
    data() {
      return {
        page:{
          background:false,
          total:1000
        },
        data: [],
        option: {
          header:false,
          height:150,
          column:[{
            label:'姓名',
            prop:'name'
          }]
        }
      }
    }
  }
</script>
Expand Copy

# 附加功能

layout属性中的每一项都是附加功能,可以自行操作

<el-button type="small" @click="page.layout='sizes,pager'">简单模式</el-button>
<el-button type="small" @click="page.layout='total, sizes, prev, pager, next, jumper'">复杂模式</el-button>
<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>

<script>
  export default {
    data() {
      return {
        page:{
          total:1000,
          layout: "total, sizes, prev, pager, next, jumper", 
        },
        data: [],
        option: {
          header:false,
          height:150,
          column:[{
            label:'姓名',
            prop:'name'
          }]
        }
      }
    }
  }
</script>
Expand Copy

# 综合用法

TIP

{ "pageSize": 20, "pagerCount": 5 }

首次加载调用on-load方法加载数据,返回page分页对象信息,赋值pagetotal总条数即可,如果total为0的话,或者simplePage为true只有1页的时候,分页选择器会隐藏

{{page}}
<avue-crud
  :data="data"
  :option="option"
  :page.sync="page"
  @on-load="onLoad"
></avue-crud>

<script>
  export default {
    data() {
      return {
        page: {
          pageSize: 20,
          pagerCount:5
        },
        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 (this.page.currentPage === 1) {
          this.data = [
            {
              id:1,
              name: '张三',
              sex: '男'
            },{
              id:2,
              name: '李四',
              sex: '女'
            }
          ]
        } else if (this.page.currentPage == 2) {
          this.data = [
            {
              id:3,
              name: '王五',
              sex: '女'
            },{
              id:4,
              name: '赵六',
              sex: '女'
            }
          ]
        }
      }
    }
  }
</script>
Expand Copy

# 自定义分页

{ "currentPage": 1, "total": 40, "layout": "total,pager,prev, next", "background": false, "pageSize": 10 }

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

{{page}}
<avue-crud
  :data="data"
  :option="option"
  :page.sync="page"
  @size-change="sizeChange"
  @current-change="currentChange"
></avue-crud>

<script>
  export default {
    data() {
      return {
        page: {
          currentPage: 1,
          total: 0,
          layout: "total,pager,prev, next",
          background:false,
          pageSize: 10
        },
        data: [],
        option: {
          align: 'center',
          menuAlign: 'center',
          column: [
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '性别',
              prop: 'sex'
            }
          ]
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.page.total = 40
        if (this.page.currentPage === 1) {
          this.data = [
            {
              id:1,
              name: '张三',
              sex: '男'
            },{
              id:2,
              name: '李四',
              sex: '女'
            }
          ]
        } else if (this.page.currentPage == 2) {
          this.data = [
            {
              id:3,
              name: '王五',
              sex: '女'
            },{
              id:4,
              name: '赵六',
              sex: '女'
            }
          ]
        }if (this.page.currentPage === 1) {
          this.data = [
            {
              id:1,
              name: '张三',
              sex: '男'
            },{
              id:2,
              name: '李四',
              sex: '女'
            }
          ]
        } else if (this.page.currentPage == 2) {
          this.data = [
            {
              id:3,
              name: '王五',
              sex: '女'
            },{
              id:4,
              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>
Expand Copy
Last Updated: 3/18/2022, 5:18:38 PM