项目场景:
双击表格显示input输入框 鼠标离开更改输入值
html代码
```javascript
<el-table-column prop="defaultValue" label="默认值" width="150">
<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.defaultValue}}</span>
<el-input
:ref="'nameinput' + scope.$index"
@blur="nameblur(scope.$index, scope.row)"
clearable
v-show="scope.row.edit_name"
size="small"
v-model="scope.row.defaultValue"
placeholder="请输入默认值"
@change="putName(scope.row)"
></el-input>
</div>
</template>
</el-table-column>
# jS代码:
```javascript
// 双击修改单元格事件
// 切换input框的显示状态
// 表格双击编辑事件
changename(index, rowdata) {
this.tabsTableData[index].edit_name = !this.tabsTableData[index]
.edit_name; //直接加key
this.tabsTableData = [...this.tabsTableData];
//添加定时器,避免没有获取到dom的情况报错
setTimeout(() => {
this.$refs["nameinput" + index].focus();
//el-input的autofocus失效,所以用这个方法。对应在template里的refs绑定值
}, 1);
},
//让失焦和回车都可以保存修改
nameblur(index, rowdata) {
//enter方法和blur方法冲突的解决办法,就是在让他们触发同一个方法
this.tabsTableData[index].edit_name = !this.tabsTableData[index]
.edit_name;
this.tabsTableData = [...this.tabsTableData];
},