antVue 多条可编辑表格时，输入第一行数据保存后，然后输入后面行的内容时第一行也跟着一起变问题

antVue 多条可编辑表格时，输入第一行数据保存后，然后输入后面行的内容时第一行也跟着一起变问题

问题描述：

在antVue中可编辑表格问题。表格中有多条可输入内容，但是在你输入第一条以后，再填写后面输入框的内容时，之前填写的内容也跟着一起改变问题

问题原因：

可编辑表格中，编辑每一行需要获取到每一行的行id，即record.id，这是如果你的行id为null就会出现这个问题。

问题解决：

如果后台传过来的数据为null，这时你需要手动为他赋值一个id（注意：每行的id不能相同！）

附加源代码（重点部分）：

<template>
 <a-table :columns="columns" :dataSource="tabledata">
      <template v-for="col in ['newRecord']" slot="newRecord" slot-scope="text, record,index">
        <div :key="col">
          <a-input
            style="margin: -5px 0"
            :value="text"
            v-if="record.editable"
            @change="e => handleChange(e.target.value, record.id, col)"
          />
          <template v-else>{{ text }}</template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <span v-if="record.editable">
          <a @click="() => save(record.id)">保存</a>
        </span>
        <span v-else>已保存</span>
      </template>
    </a-table>
</template>
<script>
export default {
  data () {
      return{
          tabledata: [],
          columns: [
        {
          title: '本次计数',
          dataIndex: 'newRecord',
          width: '15%',
          scopedSlots: { customRender: 'newRecord' }
        }
      ]
      }
  }
  methods: {
    // 初始化，获取数据
   init () {
       // list()向后端请求数据的端口
       list().then(res =>{
           // 获取表格数据源
        this.tabledata = res.data
           // i 用来给空id 赋值
        let i = 0
        this.tabledata.forEach(da => {
            // 判断，如果后端传来的数据id为null，则进行赋值
          if (da.id === null) {
            da.id = i++
          }
        })
       })
   },
    handleChange (value, key, column) {
      const newData = [...this.tabledata]
      const target = newData.filter(item => key === item.id)[0]
      if (target) {
        target[column] = value
        this.tabledata = newData
      }
    },
  }
	mounted () {
        this.init()
    }
}
</script>

演示图：