Vue中a-table插槽设置设置输入框 光标失焦/回车 更改数据

场景：一条主数据，下多条从数据，可以直接在table中修改 ，不需要弹窗！

 html代码

<a-table
    :columns="columns"
    :data-source="tableData"
    :row-selection="rowSelection"
    :selectedRowKeys="selectedRowKeys"
    style="max-height: 250px;overflow-y: auto;"
    :pagination="false"
>
  <template slot="value" slot-scope="text,record">
    <a-input :ref="'myInput_'+ record.value" v-model:value="record.value" style="width: 130px;" @click="handleEdit(record)" @blur="editParam" @pressEnter="cancelFocus(record)"/>
  </template>
  <template slot="edit" slot-scope="text,record">
    <a-button type="link" size="small" @click="handleRemove(record)">删除<a-icon type="delete" /></a-button>
  </template>
</a-table>

相关方法：

//在点击输入框的时候将所选行数据赋值给属性
handleEdit(row) {
    this.scriptParamForm = row
},
//回车时动态取消光标
cancelFocus(record){
  // this.$refs.myInput.blur();
  this.$refs['myInput_' + record.value].blur();
},

//失去焦点调用方法发送请求
editParam() {
    var _this = this;
    editParam(_this.scriptParamForm).then(res => {
        this.$message.success('修改成功')
    })
    this.dialogVisibleEdit = false
},

效果：

 注意：

        必须使用动态ref设定，不然多数据回车的时候就会失效，触发不了取消光标的方法，其次就是如果可以编辑多个字段，可以在点击输入框的时候赋值的属性，可以作为跟失去焦点时的数据坐下对比，从而得出被修改的数据然后针对修改的数据发送请求，从而解决高并发导致的问题；

        多字段编辑的话，就不要使用回车跟失焦作为发送接口的窗口，可以在第一次点击某条数据的输入框时，将后面的删除按钮隐藏，显示确认/取消按钮，确认发送请求，取消回复原始数据；