### 实现
Element
UI Table 自定义
序号列
在
Vue 和
Element
-UI 开发中，`
el-table` 是常用的
表格组件之一。为了实现自定义
序号列的功能，可以通过 `type="index"` 属性来快速生成默认的
序号列[^1]。然而，默认情况下，当数据分页时，每一页的
序号会重新从 1 开始计数。如果希望
序号能够跨页连续显示，则需要通过 `index` 方法来自定义
序号逻辑。
以下是具体的实现方法：
#### 使用 `type="index"` 默认
方式
最简单的实现
方式是在 `<
el-table>` 中添加一个带有 `type="index"` 的列：
```html
<
el-table :data="
tableData">
<
el-table-column lab
el="
序号" type="index" width="50"></
el-table-column>
</
el-table>
```
这种
方式会在每一行前自动增加
序号，但其缺点在于无法处理分页后的连续编号需求[^2]。
---
#### 跨页连续
序号的解决方案
要实现跨页连续
序号，可以利用 `index` 属性绑定的方法函数计算当前行的真实索引位置。具体代码如下：
```html
<template>
<div>
<
el-table :data="
tableData" @current
-change="handleCurrentChange">
<!
-- 序号列
-->
<
el-table-column lab
el="
序号" width="80">
<template slot
-scope="scope">
{{ (currentPage
- 1) * pageSize + scope
.$index + 1 }}
</template>
</
el-table-column>
<!
-- 其他列
-->
<
el-table-column prop="name" lab
el="名称" width="120"></
el-table-column>
<
el-table-column prop="age" lab
el="年龄" width="100"></
el-table-column>
</
el-table>
<!
-- 分页器
-->
<
el-pagination
background
layout="prev, pager, next"
:total="total"
:page
-size="pageSize"
@current
-change="handlePageChange"
></
el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 50,
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 },
// 更多数据
...
],
};
},
methods: {
handlePageChange(page) {
this
.currentPage = page;
// 假设此处调用接口获取新页面的数据并更新到
tableData
},
},
};
</script>
```
上述代码的关键部分是通过 `(currentPage
- 1) * pageSize + scope
.$index + 1` 动态计算真实
序号[^3]。其中：
- `currentPage` 表示当前页码；
- `pageSize` 表示每页显示条目数量；
- `scope
.$index` 获取当前行在本页中的索引。
这种方法确保即使切换分页，
序号也能保持连贯性。
---
### 封装动态
表格组件
对于更复杂的场景，比如需要支持表头定制化的动态
表格，可以考虑对 `
el-table` 进行二次封装。以下是一个简单示例：
```javascript
// 子组件：Dynamic
Table.vue
<template>
<
el-table :data="
tableData">
<
el-table-column v
-if="showIndexColumn" lab
el="
序号" width="80">
<template slot
-scope="scope">
{{ (pagination
.currentPage
- 1) * pagination
.pageSize + scope
.$index + 1 }}
</template>
</
el-table-column>
<
el-table-column
v
-for="(column, index) in columns"
:key="index"
:prop="column
.prop"
:lab
el="column
.lab
el"
:width="column
.width || ''"
>
</
el-table-column>
</
el-table>
</template>
<script>
export default {
props: {
tableData: Array,
columns: Array,
showIndexColumn: Boolean,
pagination: Object,
},
};
</script>
```
父组件使用此子组件时只需传递配置参数即可完成初始化。
---
### 总结
以上介绍了三种实现
Element
-UI 表格序号的
方式：
1
. 利用 `type="index"` 提供基础功能。
2
. 结合分页器手动计算跨页连续
序号。
3
. 对
表格进行二次封装以满足复杂业务需求。
这些方案可以根据实际项目的需求灵活选用。
扫一扫
1362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
