vxe-table vxe-pager 如何使用分页，自定义分页

仰望.

已于 2022-01-26 22:18:05 修改

阅读量1.4w

点赞数 1

分类专栏： vxe-ui 文章标签： vue vxe-table vxe-grid vxe-pager

于 2020-05-26 14:59:20 首次发布

本文链接：https://blog.youkuaiyun.com/abc26296/article/details/106356028

版权

vxe-ui 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了如何在vxe-table中使用vxe-pager进行分页操作，强调grid作为强大集成组件的简易配置方式，提供基础的分页设置，并提示读者可参考官方文档获取更高级的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vxe-table 如何使用分页，自定义分页

表格和分页是两个不同的组件，可以搭配在一起使用，具体如下：

在这里插入图片描述

<vxe-table
  show-overflow
  height="200"
  row-id="id"
  :loading="loading"
  :data="tableData">
  <vxe-column type="checkbox" width="60"></vxe-column>
  <vxe-column type="seq" title="序号" width="60"></vxe-column>
  <vxe-column field="name" title="Name" sortable></vxe-column>
  <vxe-column field="sex" title="Sex"></vxe-column>
  <vxe-column field="age" title="Age"></vxe-column>
</vxe-table>

<vxe-pager
  :loading="loading"
  :current-page="tablePage.currentPage"
  :page-size="tablePage.pageSize"
  :total="tablePage.total"
  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
  @page-change="handlePageChange">
</vxe-pager>

export default {
 data () {
    return {
      loading: false,
      tableData: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created () {
    this.findList()
  },
  methods: {
    findList () {
      // 模拟后台接口
      this.loading = true
      setTimeout(() => {
      	const list = [
	      	{name: 'test_124',sex: '男', age: 32},
	      	{name: 'test_190',sex: '女', age: 22},
	      	{name: 'name_66',sex: '男', age: 26},
	      	{name: 'name_77',sex: '男', age: 28},
	      	{name: 'name_17',sex: '女', age: 23}
      	]
      	this.tableData = list 
      	this.tablePage.total = 401
      	this.loading = false
      }, 200)
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.findList()
    }
  }
}

在 grid 中如何使用分页，grid是一套更加强大集成组件，使用分页只需要简单配置即可：

在这里插入图片描述

<vxe-grid
  border
  resizable
  height="530"
  :loading="loading"
  :pager-config="tablePage"
  :columns="tableColumn"
  :data="tableData"
  @page-change="handlePageChange"></vxe-grid>

export default {
 data () {
   return {
     loading: false,
     tablePage: {
       total: 0,
       currentPage: 1,
       pageSize: 10,
       pageSizes: [10, 20, 50, 100, 200, 500],
       layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
       perfect: true
     },
     tableColumn: [
       { type: 'seq', width: 60 },
       { type: 'checkbox', width: 50 },
       { field: 'name', title: 'Name' },
       { field: 'nickname', title: 'Nickname' },
       { field: 'role', title: 'Role' },
       { field: 'describe', title: 'Describe', showOverflow: true }
     ],
     tableData: []
   }
 },
 created () {
   this.findList()
 },
 methods: {
   findList () {
     // 模拟后台接口
     this.loading = true
     setTimeout(() => {
      	const list = [
	      	{name: 'test_124',sex: '男', age: 32},
	      	{name: 'test_190',sex: '女', age: 22},
	      	{name: 'name_66',sex: '男', age: 26},
	      	{name: 'name_77',sex: '男', age: 28},
	      	{name: 'name_17',sex: '女', age: 23}
      	]
      	this.tableData= list 
      	this.tablePage.total = 401
      	this.loading= false
      }, 200)
   },
   searchEvent () {
     this.tablePage.currentPage = 1
     this.findList()
   },
   handlePageChange ({ currentPage, pageSize }) {
     this.tablePage.currentPage = currentPage
     this.tablePage.pageSize = pageSize
     this.findList()
   }
 }
}

更多高级用法可以去看官方文档