vue elementui双击变输入框效果
<el-table ref="mainTable1" :key="1" :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%;" @cell-dblclick="celledit" >
<el-table-column min-width="80px" label="修正值" align="center" show-overflow-tooltip > <template slot-scope="scope"> <el-input v-if="scope.row.isEdit" v-model="scope.row.reviseValue" size="mini" :ref="scope.row.id" @blur="saveChange(scope.row)" ></el-input> <span v-else>{{scope.row.reviseValue}}</span> </template> </el-table-column>
celledit(row, column, cell, event) {
var temp = this.list.find(m => m.id === row.id);
temp.isEdit = column.label === '修正值';
setTimeout(() => {
this.$refs[row.id].focus()
}, 50);
},
saveChange(row) {
console.log("saveChange");
var temp = this.list.find(m => m.id === row.id);
temp.isEdit = false;
}
说明:
1.el-table中添加@cell-dblclick事件
2.具体列上使用v-if来处理是显示文字还是书入框
3.如果想获取焦点,需要setTimeout一下才行
4.isEdit字段需要从接口返回,或者先定义,不然不起作用