分页

页码和条数

页码:1

条数:10

总数:1000

暂无数据

共 1000 条
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 100
前往

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

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

</template>
<script>
export default {
  data () {
    return {
      page: {
        total: 1000,
        currentPage: 1,
        pageSize: 10
      },
      data: [],
      option: {
        header: false,
        column: [{
          label: '姓名',
          prop: 'name'
        }]
      }
    }
  }
}
</script>
显示代码

设置最大页码按钮数

暂无数据

共 1000 条
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 100
前往

pagerCount属性默认为7

<template>
  <avue-crud :data="data"
             :option="option"
             v-model:page="page"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      page: {
        pagerCount: 11,
        total: 1000
      },
      data: [],
      option: {
        header: false,
        column: [{
          label: '姓名',
          prop: 'name'
        }]
      }
    }
  }
}
</script>
显示代码

无背景色的分页

暂无数据

共 1000 条
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 100
前往

background属性默认为true

<template>
  <avue-crud :data="data"
             :option="option"
             v-model:page="page"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      page: {
        background: false,
        total: 1000
      },
      data: [],
      option: {
        header: false,
        column: [{
          label: '姓名',
          prop: 'name'
        }]
      }
    }
  }
}
</script>
显示代码

附加功能



暂无数据

共 1000 条
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 100
前往

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

<template>
  <el-button @click="page.layout='sizes,pager'">简单模式</el-button>
  <el-button @click="page.layout='total, sizes, prev, pager, next, jumper'">复杂模式</el-button>
  <br /><br />
  <avue-crud :data="data"
             :option="option"
             v-model:page="page"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      page: {
        total: 1000,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      data: [],
      option: {
        header: false,
        column: [{
          label: '姓名',
          prop: 'name'
        }]
      }
    }
  }
}
</script>
显示代码

综合用法

TIP

暂无数据

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

<template>
  <avue-crud :data="data"
             :option="option"
             v-model:page="page"
             @on-load="onLoad"></avue-crud>
</template>
<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>
显示代码

自定义分页

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

暂无数据

共 40 条
  • 1
  • 2
  • 3
  • 4

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


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

<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>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档