VUE v-for中修改data数据

有个需求，要求使用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 = 0
      return this.tableData.map((one, index) => {
        one.rowIndex = (++index)
      })
    }
  },
  methods: {
    
  }
}
</script>

但这要求数据量不能太大，否则渲染压力一下就上来了。先这样吧，等以后有好方法再说。

就这样^_^