Vue2 中el-table 翻页序号连续
时间: 2024-01-12 10:20:06 浏览: 52
为了实现Vue2中el-table翻页时序号连续的效果,可以使用以下步骤:
1.在el-table中添加一列,使用type="index"属性来生成序号列,同时将:index属性绑定到一个变量上,例如table_index。
2.在el-table的@current-change事件中,重新计算序号列的值,使其连续。可以使用以下代码:
```javascript
handleCurrentChange(val) {
// 计算当前页的第一条数据的序号
let startIndex = (val - 1) * this.pageSize + 1;
// 更新序号列的值
this.tableData.forEach((item, index) => {
this.$set(item, 'table_index', startIndex + index);
});
}
```
3.在el-table的@row-remove事件中,重新计算序号列的值,使其递补。可以使用以下代码:
```javascript
handleRowRemove(row, index) {
// 从删除行的下一行开始,更新序号列的值
for (let i = index + 1; i < this.tableData.length; i++) {
this.$set(this.tableData[i], 'table_index', this.tableData[i].table_index - 1);
}
}
```
相关问题
vue3 el-table序号
在Vue3的el-table中展示序号可以使用`index`属性。具体方法如下:
```html
<template>
<el-table :data="tableData">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
}
}
</script>
```
在el-table-column中设置`type="index"`即可展示序号,同时可以设置`label`属性来自定义序号列的表头名称。
vue3中el-table怎么拿到rowIndex
在 Vue3 中,`el-table` 组件已经被废弃了,取而代之的是 `el-table` 的升级版 `el-table-v2` 或是 `el-table` 的替代品 `element-plus` 中的 `el-table` 组件。
对于 `el-table-v2`,可以在 `el-table-column` 组件的 `scopedSlots` 中拿到当前行的索引。示例如下:
```html
<template>
<el-table-v2 :data="tableData">
<el-table-column label="序号" align="center" width="80">
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column label="姓名" prop="name" align="center"></el-table-column>
<el-table-column label="年龄" prop="age" align="center"></el-table-column>
</el-table-v2>
</template>
```
在上述代码中,通过 `$index` 可以拿到当前行的索引,然后加上 1 就可以得到当前行的序号。
对于 `element-plus` 中的 `el-table`,则可以在 `el-table-column` 组件的 `custom` 属性中传入一个函数,该函数的第一个参数就是当前行的数据对象,第二个参数就是当前行的索引。示例如下:
```html
<template>
<el-table :data="tableData">
<el-table-column label="序号" align="center" width="80" :custom="renderIndex"></el-table-column>
<el-table-column label="姓名" prop="name" align="center"></el-table-column>
<el-table-column label="年龄" prop="age" align="center"></el-table-column>
</el-table>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
}
},
methods: {
renderIndex(row, index) {
return index + 1
},
},
})
</script>
```
在上述代码中,定义了一个名为 `renderIndex` 的方法,该方法的第一个参数 `row` 就是当前行的数据对象,第二个参数 `index` 就是当前行的索引。在 `el-table-column` 组件的 `custom` 属性中传入该方法即可。