Vue ElementUI table实现双击修改编辑某个内容的方法
作者：Java小白中的菜鸟
在实现表格单元格双击编辑功能时,需使用@cell-dblclick事件来触发双击操作,将单元格切换为input输入框,通过ref引用和绑定失焦及回车事件来确认编辑,同时,需要处理编辑数据的更新和方法逻辑的完善
1、使用@cell-dblclick事件，当双击时触发事件
<el-table @cell-dblclick="handleCellDblClick"
2、单元格设置
主要重点为判断双击时切换input框，然后绑定ref，设置失去焦点时触发点方法，与按enter键触发点方法
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<span v-if="editableData !== scope.row">{{ scope.row.name }}</span>
<el-input
v-else
:ref="'input-' + scope.$index"
v-model="scope.row.name"
@blur="handleInputBlur(scope.row)"
@keyup.enter.native="handleInputEnter(scope.row)"
></el-input>
</template>
</el-table-column>3、添加当前编辑的数据
editableData: null, // 当前编辑的数据项
4、为所有的方法赋予逻辑
// 双击时触发
handleCellDblClick(row, column, cell, event) {
if (column.property === 'customerBoxNum') {
this.editableData = row; // 设置当前编辑的数据项
this.$nextTick(() => {
const inputRef = 'input-' + this.boxList.indexOf(row);
const inputElement = this.$refs[inputRef];
if (inputElement) {
inputElement.focus(); // 聚焦输入框
} else {
console.error('Input element not found:', inputRef);
}
});
}
},
handleInputBlur(row) {
// 输入框失去焦点时保存更改
this.editableData = null; // 返回到静态显示状态
},
handleInputEnter(row) {
// 按下回车键时保存更改
this.editableData = null; // 返回到静态显示状态
},5、打完收工
到此这篇关于VueElementUI table实现双击修改编辑某个内容的方法的文章就介绍到这了,更多相关Vue ElementUI table双击修改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！