当前位置：首页 > news >正文

vue+elementUI实现指定列的单元格可编辑

news 2025/8/25 13:07:03

template中的代码如下：

<div v-if="(item.label === '高压侧' || item.label === '低压侧')&&coloumnHeader.label === '单柱片数'"><div class="editableCell"><div v-if="item.label === '高压侧'" @dblclick="changeValue(scope.$index, scope.row,'high')"><span v-if="!scope.row.highEdit">{{scope.row[item.prop]}}</span><el-input v-model="scope.row[item.prop]" v-else="scope.row.highEdit" size="mini" @blur.native.capture="valueBlur(scope.$index, scope.row, 'high')" v-focus></el-input></div><div v-else @dblclick="changeValue(scope.$index, scope.row,'low')"><span v-if="!scope.row.lowEdit">{{scope.row[item.prop]}}</span><el-input v-model="scope.row[item.prop]" v-else="scope.row.lowEdit" size="mini" @blur.native.capture="valueBlur(scope.$index, scope.row, 'low')"v-focus></el-input></div>			</div></div>

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)},