有個需求，要求使用v-for生成序號，但是中間可能會中斷，例如：

1
2
3
4
(此行無序號)
5
6
(此行無序號)
(此行無序號)
(此行無序號)
7
8
......

想著這還不簡單，只要在data中定義一個變量，然后每次調用時++就行了

<template><table><tr v-for="(one, index) of tableData" :key="index"><td>{{ getRowIndex() }}</td><td>..省略...</td></tr></table>
</template><script>
export default {name: 'haha',data() {showIndex: 0},props: {tableData: {type: Array,default: function() {return []}}},methods: {getRowIndex() {return (++this.showIndex)}}
}
</script>

結果出來的結果，序號都是4000多，要不就是8千多，反正不是從1開始。

后來查了一下，發現在v-for中不能修改data中的數據，似乎修改后，會觸發v-for的再次修改。反反復復的折騰了半天，后來放棄了。還是直接修改數據吧。

<template><table><tr v-for="(one, index) of tableData" :key="index"><td>{{ one.rowIndex }}</td><td>...省略...</td></tr></table>
</template>
<script>
export default {name: 'haha',data() {},props: {tableData: {type: Array,default: function() {return []}}},computed: {showTableData() {let index = 0return this.tableData.map((one, index) => {one.rowIndex = (++index)})}},methods: {}
}
</script>

但這要求數據量不能太大，否則渲染壓力一下就上來了。先這樣吧，等以后有好方法再說。

就這樣^_^