我这个vue表格序号列,根据当前模块变量来自增序号
时间: 2023-08-04 11:15:33 浏览: 269
你可以在 Vue 组件中定义一个 `data` 属性来存储当前模块变量的值,然后在渲染表格时,根据当前行的索引值,将序号列的值设置为当前模块变量的值加上当前行的索引值。
以下是一个示例代码:
```vue
<template>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in dataList" :key="item.id">
<td>{{ moduleValue + index }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
moduleValue: 1, // 当前模块变量的值
dataList: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 },
],
};
},
};
</script>
```
在上面的代码中,我们通过 `v-for` 指令遍历 `dataList` 数组,然后在序号列中使用 `moduleValue + index` 的方式来计算当前行的序号值,其中 `index` 表示当前行在数组中的索引值。
阅读全文