###
el-table 分页时
序号的动态变化实现方法
在使用 `
el-table` 组件进行
分页时，如果需要使
序号随着页码的变化而动态调整，可以通过设置 `
el-table` 的 `index` 属性为一个自定义方法来实现。这种方法可以确保每一页的
序号从上一页的最后一个
序号延续下来。
以下是具体实现方式：
#### 自定义
序号方法
通过 `index
-method` 属性绑定一个方法，该方法会根据当前页码和每页显示的行数
计算出正确的
序号。代码示例如下：
```
javascript
methods: {
indexMethod(index) {
// 当前页码从1开始计数
return (this
.currentPage
- 1) * this
.pageSize
+ index
+ 1;
}
}
```
上述代码中：
- `this
.currentPage` 表示当前页码[^1]。
- `this
.pageSize` 表示每页显示的行数[^1]。
- `index` 是当前页内行的索引
值，从0开始。
最终返回的结果是全局的
序号，能够保证每一页的
序号连续。
#### 示例代码
以下是一个完整的
Vue 实现示例：
```
vue
<template>
<div>
<
el-table :data="
tableData" style="width: 100%">
<
el-table-column type="index" :index="indexMethod" lab
el="
序号" width="100"></
el-table-column>
<
el-table-column prop="name" lab
el="名称" width="180"></
el-table-column>
<
el-table-column prop="age" lab
el="年龄"></
el-table-column>
</
el-table>
<
el-pagination
@current
-change="handleCurrentChange"
:current
-page="currentPage"
:page
-size="pageSize"
:total="total">
</
el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
allData: [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 },
{ name: '王五', age: 28 },
{ name: '赵六', age: 22 },
{ name: '孙七', age: 29 },
{ name: '周八', age: 31 },
{ name: '吴九', age: 27 },
{ name: '郑十', age: 24 }
],
tableData: [],
currentPage: 1,
pageSize: 3,
total: 0
};
},
methods: {
indexMethod(index) {
return (this
.currentPage
- 1) * this
.pageSize
+ index
+ 1;
},
handleCurrentChange(val) {
this
.currentPage = val;
this
.update
TableData();
},
update
TableData() {
const start = (this
.currentPage
- 1) * this
.pageSize;
const end = start
+ this
.pageSize;
this
.tableData = this
.allData
.slice(start, end);
}
},
created() {
this
.total = this
.allData
.length;
this
.update
TableData();
}
};
</script>
```
#### 关键点说明
1
. **`type="index"` 和 `:index` 属性**：`
el-table-column` 的 `type="index"` 用于生成
序号列，`:index` 属性可以绑定一个方法以动态
计算序号。
2
. **
分页逻辑**：通过 `
el-pagination` 的 `@current
-change` 事件监听页码变化，并更新表格数据[^3]。
3
. **
序号计算公式**：`(当前页码
- 1) * 每页行数
+ 当前行索引
+ 1`[^1]。
---
扫一扫
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
