vxe-table 分页事件绑定

vxe-table分页事件绑定可以通过监听"current-change"事件来实现。代码示例如下：

<vxe-table @current-change="handlePageChange"></vxe-table>

methods: {
  handlePageChange(currentPage) {
    // 处理分页逻辑
    // currentPage表示当前页码
  }
}

相关问题

vxe-table 分页容器

### vxe-table 分页容器的使用方法与配置

分页功能是 `vxe-table` 中非常实用的功能之一，能够有效管理大量数据展示。为了实现这一特性，在组件中提供了专门用于控制分页行为的相关属性和插槽。

#### 基础分页设置

要启用基本分页模式，可以在 `<vxe-pager>` 组件内定义一些必要的参数来定制化页面大小、当前页码等选项[^1]：

<vxe-pager
  :current-page.sync="page.currentPage"
  :page-size.sync="page.pageSize"
  :total="page.totalResult">
</vxe-pager>

这里展示了最简单的分页器配置方式，其中包含了三个主要绑定项：
- `currentPage`: 当前所在页数；
- `pageSize`: 每一页显示的数据条目数量；
- `total`: 数据总量；

这些变量应当预先在 Vue 实例中的 data 函数里声明好默认值。

#### 进阶自定义样式

除了上述基础设定外，还可以进一步调整分页栏外观以及交互逻辑。比如更改按钮文字、增加快捷跳转输入框或是修改布局顺序等等[^2]:

<template slot="footer">
  <vxe-pager
    perfect
    size="medium"
    :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
    :current-page.sync="page.currentPage"
    :page-size.sync="page.pageSize"
    :total="page.totalResult"
    @page-change="handlePageChange">
  </vxe-pager>
</template>

此段代码片段不仅设置了更详细的 layout 属性以改变各部分排列形式，还绑定了事件监听函数 handlePageChange() ，以便于处理翻页动作触发后的业务需求。

#### 关联表格数据更新

当用户操作分页控件时，通常期望看到对应的新一批记录被加载出来并呈现在界面上。因此需要确保每当 currentPage 或 pageSize 发生变化之后都能及时刷新视图内容[^3]：

methods: {
  findList () {
    this.loading = true
    setTimeout(() => { // 模拟异步请求过程
      const list = []
      for (let index = 0; index < this.page.pageSize; index++) {
        list.push({
          id: this.mockId++,
          name: `名称${this.mockId}`,
          nickname: `昵称${this.mockId}`
        })
      }
      this.tableData = list
      this.page.totalResult = 1000
      this.loading = false
    }, 800)
  },
  
  handlePageChange ({ currentPage, pageSize }) {
    this.page.currentPage = currentPage
    this.page.pageSize = pageSize
    this.findList()
  }
}

这段 JavaScript 方法实现了模拟服务器端获取新批次列表的过程，并且每次切换页码都会重新调用 findList() 来填充最新查询结果到 tableData 变量当中去。

vxe-grid分页更新高度用什么

`vxe-grid` 是基于 Vue.js 的表格组件库 VxeTable 中的一个强大而灵活的表格组件。当你提到“分页更新高度”的需求时，这通常涉及到动态调整表格的高度以适应内容变化、窗口大小改变等情况。

对于 `vxe-grid` 来说，当页面切换或其他原因导致数据行数发生变化后自动调整表格显示区域的高度，可以参考以下几个方面：

### 动态设置表格高度

#### 1. 使用内置属性
VxeGrid 提供了 `height` 属性用于固定表头并指定表格容器的最大高度。如果需要让表格根据实际内容自适应，则不应直接设置此值；相反地，在某些场景下可通过计算得到合适的高度再赋给它。

data() {
  return {
    tableHeight: null // 初始状态设为空或默认值
  }
},
mounted() {
  this.updateTableHeight()
}

#### 2. 根据视窗尺寸监听事件
为了保证用户在拖拽浏览器边缘改变宽度的时候也能及时响应，可以通过监听页面布局变动的通知来进行处理：

methods: {
  updateTableHeight () {
      let height = document.documentElement.clientHeight - this.$refs.header.offsetHeight;
      this.tableHeight = `${height}px`;
   },
}

created(){
   window.addEventListener('resize',this.updateTableHeight);
},

beforeDestroy(){
   window.removeEventListener('resize',this.updateTableHeight);
}

以上代码片段展示了如何通过 JavaScript 计算可用空间，并将其应用于 `tableHeight` 变量上绑定到模板中的 style 或者 props 内传递给 `<vxe-grid>` 组件。

#### 3. 分页加载后的回调函数中调整
如果你是在异步获取新一页的数据之后想要刷新一次高度的话，可以在请求完成并且渲染完成后再次调用上面定义好的方法:

async handlePageChange({ currentPage }) {
 await loadData(currentPage); // 加载对应页码的数据源操作...
 if (this.gridRef) { 
     setTimeout(() => {
         this.updateTableHeight();
       },0)
 };
};

这里的 `setTimeout` 确保 DOM 更新已经同步完毕后再去测量新的布局信息。

需要注意的是具体的实现细节会依赖于项目的实际情况以及使用的框架版本等因素影响。官方文档是最权威的信息来源，请务必查阅最新版 [VxeTable 文档](https://vxetable.cn/) 获取最准确的帮助和支持。