element的表格双击修改，回车and失焦保存上传

个人记录

因为表格中含有其他控件的组合，只能选择单独的某些列加入双击修改功能
element-ui+Vue
html部分

<el-table-column align="center" prop="name" label="姓名" width="200">
     <template slot-scope="scope" >
         <div @dblclick="changename(scope.$index,scope.row)" style="height: 40px;line-height: 40px;">
             <span v-show="!scope.row.edit_name">{{scope.row.name}}</span>                        
             <el-input :ref='"nameinput"+scope.$index' @blur="nameblur(scope.$index,scope.row)"
                 @keyup.enter.native="$event.target.blur" clearable v-show="scope.row.edit_name" size="small"
                 v-model="scope.row.name" placeholder="请输入内容"
                 @change="putName(scope.row)"></el-input>
         </div>
     </template>        
</el-table-column>

methods部分

// 表格双击编辑事件
    changename(index, rowdata) {
        this.userList[index].edit_name = !this.userList[index].edit_name;//直接加key
        this.userList = [...this.userList];
        //添加定时器,避免没有获取到dom的情况报错
        setTimeout(() => {
            this.$refs['nameinput' + index].focus()
            //el-input的autofocus失效，所以用这个方法。对应在template里的refs绑定值
        }, 1)        
    },
    //让失焦和回车都可以保存修改
    nameblur(index, rowdata) {
        //enter方法和blur方法冲突的解决办法，就是在让他们触发同一个方法
        this.userList[index].edit_name = !this.userList[index].edit_name;
        this.userList = [...this.userList];
    },
    //调用接口上传修改结果
    putName(row) {
        let query = {
            person: {
                name: undefined
            },
        };
        console.log(row);
        query.person.name = Object.assign({}, row).name;
        console.log(Object.assign({}, row));
        editUser(query, Object.assign({}, row).id).then((res) => {
            this.$notification.open({
                message: '提示',
                description:
                    '修改人员姓名成功！',
            });
            this.getUserList();
        });
    },

遇到了问题：修改后使用回车上传会出现input框不消失的bug