vxe-table 分页事件绑定
时间: 2023-10-11 12:05:25 浏览: 80
vxe-table分页事件绑定可以通过监听"current-change"事件来实现。代码示例如下:
```html
<vxe-table @current-change="handlePageChange"></vxe-table>
```
```javascript
methods: {
handlePageChange(currentPage) {
// 处理分页逻辑
// currentPage表示当前页码
}
}
```
相关问题
vxe-table分页序号连续性
为了实现vxe-table分页序号的连续性,可以使用vxe-table-plugin-menus插件提供的API。具体步骤如下:
1.安装vxe-table-plugin-menus插件
```shell
npm install vxe-table-plugin-menus@next --save
```
2.在代码中引入vxe-table-plugin-menus插件
```javascript
import VXETablePluginMenus from 'vxe-table-plugin-menus'
VXETable.use(VXETablePluginMenus)
```
3.在表格中使用插件提供的API
```html
<vxe-table
ref="xTable"
:data="tableData"
:columns="columns"
:pager-config="pagerConfig"
@mounted="onMounted">
<template #seq="params">
{{ getSeq(params) }}
</template>
</vxe-table>
```
```javascript
methods: {
onMounted () {
this.$refs.xTable.connect({ menu: true }).then(() => {
this.$refs.xTable.refresh()
})
},
getSeq ({ $table, row }) {
const { $seq, $rowIndex, $pageSize } = $table
return ($seq.currentPage - 1) * $pageSize + $rowIndex + 1
}
}
```
在上述代码中,我们使用了vxe-table-plugin-menus插件提供的connect()方法,将菜单功能添加到表格中。然后,我们在表格中使用了自定义序号列,并在序号列中使用了getSeq()方法来计算序号。在getSeq()方法中,我们使用了$vxeTable.seq.currentPage、$vxeTable.rowIndex和$vxeTable.pageSize等属性来计算序号。
vxe-table分页实例
好的,下面是一个基于 vxe-table 的分页实例:
```html
<template>
<div>
<vxe-table :data="tableData" :columns="columns" :pager-config="pagerConfig"></vxe-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 },
{ id: 4, name: '赵六', age: 24 },
{ id: 5, name: '钱七', age: 26 },
{ id: 6, name: '孙八', age: 28 },
{ id: 7, name: '周九', age: 30 },
{ id: 8, name: '吴十', age: 32 }
],
columns: [
{ field: 'id', title: 'ID' },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' }
],
pagerConfig: {
currentPage: 1,
pageSize: 3,
total: 8
}
}
}
}
</script>
```
在上面的例子中,我们通过 vxe-table 组件来展示表格数据,并且添加了分页功能。其中,pagerConfig 对象用于配置分页的一些参数,如当前页码、每页条数和总数据量。这样,就可以实现基本的分页功能了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)