<el-table
:data="tableData"
class="tb-edit"
style="width: 100%;"
border
highlight-current-row
@row-click="handleCurrentChange"
>
<el-table-column label="Id" prop="id" width="80" align="center"></el-table-column>
<el-table-column label="User" prop="user" width="160" align="center">
<template slot-scope="scope">
<el-input
type="text"
:id="scope.row.id"
:disabled="editId !== scope.row.id"
v-model="scope.row.user"
>
<!-- v-model="scope.row.user" -->
<!-- <span>{{row.user}}</span> -->
</el-input>
</template>
</el-table-column>
</el-table>
export default {
data() {
return {
button_add: true,
// userData:[]
// preForm: JSON.parse(JSON.stringify(this.tableData)), //深拷贝对象
user: {
user: '',
// num: ''
}
}
},
watch: {
'scope.row.user':{
handler(newValue, oldValue){
// var that = this;
console.log(newValue, oldValue)
for(let i in this.tableData){
// debugger
if(newValue[i] !== oldValue[i]) {
// if(newValue !== oldValue) {
this.$confirm('There are changes that have not been saved.Do you want to save them?', 'Prompt', {
confirmButtonText: 'Save',
cancelButtonText: 'No',
type: 'warning',
}).then(() => {
this.saveEdit(index, row);
}).catch(() => {
this.editId = ''; //恢复禁用
// this.editId = row.id;
this.tableDataAdd();
this.$message({
type: 'info',
message: 'Close!',
});
});
// break;
}
// else{
this.editId = row.id;
let showDiv = document.getElementById(row.id);
console.log('showDivvvvvvvvvvv',showDiv)
setTimeout(() => {
showDiv.focus();
},0)
// }
}
},
deep: true
}
},
scope.row.user
是没办法用watch
的,不过可以给el-input
添加@change
试试