vxe-table的序号一样

使用vxe-table的时候，有的时候会出现序号相同的现象，这种现象一般出现在我们后面自己添加的行中，就像这种

此时的这三个序号是相同的，我来说一下原因，这是在添加新的一行的时候，有的时候数据很多，我们不想一个个的写，就直接复制之前表格中的某一行，然后在改变其中的某一个属性，这个就会出现序号相同的情况

解决方法：

把新复制某一行的对象的 _X_ROW_KEY 赋值为 null 就可以了

看代码

<template>
  <div>
    <el-button type="primary"
               @click="addRow">添加一行</el-button>
    <vxe-table border
               height="300"
               :row-config="{isHover: true}"
               :data="tableData">
      <vxe-column type="seq"
                  title="序号"
                  width="80"></vxe-column>
      <vxe-column field="name"
                  title="Name"
                  sortable></vxe-column>
      <vxe-column field="sex"
                  title="Sex"></vxe-column>
      <vxe-column field="age"
                  title="Age"></vxe-column>
      <vxe-column field="address"
                  title="Address"
                  show-overflow></vxe-column>
    </vxe-table>
  </div>
</template>
  
  <script>
import { cloneDeep } from 'lodash-es'
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ],
    }
  },
  methods: {
    addRow () {
      // 假如每一行对象的数据很多，我们像添加的一行只改变其中的某个属性，其余保持一样
      const obj = cloneDeep(this.tableData[0])
      obj.name = 'Test5'
      //   const obj = {  // 一样的结果，新添加的行序号也是一样
      //     ...this.tableData[0],
      //     name: 'Test5'
      //   }
      //   ！！！把下面这行注释解开就可以成功解决问题了
      //   obj._X_ROW_KEY = null
      this.tableData.push(obj)
    }
  }
}
  </script>