element-ui 使用table current-change这个方法时 选择表格报错

### 实现 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 label="序号" type="index" width="50"></el-table-column> </el-table> ``` 这种方式会在每一行前自动增加序号，但其缺点在于无法处理分页后的连续编号需求[^2]。 --- #### 跨页连续序号的解决方案 要实现跨页连续序号，可以利用 `index` 属性绑定的方法函数计算当前行的真实索引位置。具体代码如下： ```html <template> <div> <el-table :data="tableData" @current-change="handleCurrentChange"> <!-- 序号列 --> <el-table-column label="序号" width="80"> <template slot-scope="scope"> {{ (currentPage - 1) * pageSize + scope.$index + 1 }} </template> </el-table-column> <!-- 其他列 --> <el-table-column prop="name" label="名称" width="120"></el-table-column> <el-table-column prop="age" label="年龄" 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 // 子组件：DynamicTable.vue <template> <el-table :data="tableData"> <el-table-column v-if="showIndexColumn" label="序号" 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" :label="column.label" :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. 对表格进行二次封装以满足复杂业务需求。 这些方案可以根据实际项目的需求灵活选用。