vxe-table-column中,想让表格的序号第一页是1-20,第二页是21-40这样,该怎么做?
时间: 2024-06-08 09:09:00 浏览: 174
JS实现table表格数据排序功能(可支持动态数据+分页效果)
你可以通过 `table-index` 属性和一个计算属性来实现这个需求。首先,给 `vxe-table-column` 组件添加 `table-index` 属性,如下所示:
```html
<vxe-table-column type="index" width="80" :table-index="tableIndex"></vxe-table-column>
```
然后,在你的 `data` 中添加一个变量,名为 `currentPage`,表示当前页数:
```js
data() {
return {
currentPage: 1,
// ...
}
}
```
接着,在 `computed` 中添加一个计算属性,用于计算当前页的起始序号:
```js
computed: {
tableIndex() {
return (this.currentPage - 1) * 20 + 1
},
// ...
}
```
最后,在你的分页组件中,监听 `current-change` 事件,并将当前页数赋值给 `currentPage` 变量:
```html
<vxe-pagination @current-change="currentPage = $event"></vxe-pagination>
```
这样,就可以实现你想要的效果了。
阅读全文