el-table和vxe-table没有给每一行添加key时，当我们删除第二行数据时，焦点会自动聚焦在变为第二行的第三行数据按钮上。

 

最近开始使用vxe-table了，多记录，多积累

el-table动态删除当前行和vex-table动态删除当前行

主要说操作列

el-table通过scope.$index获取当前行索引

  <el-table-column width="60" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button @click="delColunm(scope.$index,scope.row)" type="text">删除</el-button>
                  </template>
                </el-table-column>

 <vxe-column title="操作" width="100">
                  <template #default="{ row, column, rowIndex, columnIndex }">
                    <vxe-button type="text" @click="delColunm(rowIndex)">删除</vxe-button>
                  </template>
                </vxe-column>

 

    delColunm(index,row) {
      this.tableData.splice(index, 1)
//一定是这个index
    },

 

el-table中的row-key
vue中key作用
key的作用就是更新组件时判断两个节点是否相同。相同就复用，不同就删除旧的创建新的。如果不添加key组件默认都是就地复用，不会删除添加节点，只是改变列表中的文本值。添加key之后，Vue对比节点内容不一致时，就会认为是两个节点，会先删除掉旧节点，然后添加新节点。

例：
el-table没有给每一行添加key时，当我们删除第二行数据时，焦点会自动聚焦在变为第二行的第三行数据按钮上。

原因：
删除一行数据时，Vue会认为我们把2变成了3，把3删除了。所以只会把第二行的数据变成第三行，但是按钮的状态会就地复用。

解决：
给每一行添加一个key，el-table设置row-key

<el-table :row-key="record=>record.id"></el-table>// id为表格数据中的一个属性（唯一），record为每一行数据

<el-table row-key="id"></el-table>// row-key此时不带冒号，绑定值为数据中属性id

注：表格中不建议使用index作为key，删除数据时，索引会自动连续，（1,2，3删除第2，索引会自动变成1,2，而不是1,3）所以Vue仍然会认为删除的是第3项，而不是第2项。