vxe-table分页序号连续性
时间: 2023-12-01 07:43:12 浏览: 162
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
为了实现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等属性来计算序号。
阅读全文