我要评论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双击修改内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论