template中的代码如下：
{{scope.row[item.prop]}}
v-model="scope.row[item.prop]" v-else="scope.row.highEdit" size="mini" @blur.native.capture="valueBlur(scope.$index, scope.row, 'high')" v-focus>
{{scope.row[item.prop]}}
v-model="scope.row[item.prop]" v-else="scope.row.lowEdit" size="mini" @blur.native.capture="valueBlur(scope.$index, scope.row, 'low')" v-focus>
js代码如下：
/**
* 高压侧低压侧列双击可输入值
* @param {Number} index 行索引
* @param {Object} rowData 行数据
* @param {String} type 高低压侧类型
*/
changeValue(index,rowData, type){
if(type === 'high'){
// 数据更新，视图更新
if(Object.keys(this.updateTableData[index]).indexOf("highEdit") === -1){
// 还没编辑过的添加编辑属性
this.$set(this.updateTableData, index,{highEdit:true,...this.updateTableData[index]});
}else{
// 已经编辑过的，更改编辑属性
this.$set(this.updateTableData[index], "highEdit", true);
}
}else if(type === 'low'){
if(Object.keys(this.updateTableData[index]).indexOf("lowEdit") === -1){
this.$set(this.updateTableData, index,{lowEdit:true,...this.updateTableData[index]});
}else{
this.$set(this.updateTableData[index], "lowEdit", true);
}
}
},
/**
* 输入框失去焦点时触发
* @param {Number} index 行索引
* @param {Object} rowData 行数据
* @param {String} type 高低压侧类型
*/
valueBlur(index,rowData, type){
// 数据更新，视图更新
if(type === "high"){
this.$set(this.updateTableData[index], "highEdit", false);
}else{
this.$set(this.updateTableData[index], "lowEdit", false);
}
console.log(this.updateTableData)
},
推荐文章
发表评论