Element UI 双击事件（@cell-dblclick 与 @row-dblclick）
Element UI 双击事件（@cell-dblclick 与 @row-dblclick）
一、核心双击事件绑定
表格单元格双击
事件绑定： 通过 @cell-dblclick 监听单元格双击，接收四个参数（row, column, cell, event）。
示例代码：
<el-table :data="list" @cell-dblclick="editTable"><el-table-column prop="name" label="名称" />
</el-table>
参数应用： 通过 column.property 判断双击的列，执行特定逻辑：
editTable(row, column) {if (column.property === 'name') {this.editRow = row; // 定位当前编辑行}
}
行双击事件
事件绑定： 使用 @row-dblclick 监听整行双击，直接获取行数据：
<el-table @row-dblclick="handleRowDblClick">
handleRowDblClick(row) {this.selectedRow = row; // 获取双击行数据
}
二、实现双击编辑表格内容
1、状态切换与显示控制
逻辑设计： 双击时标记单元格为编辑状态，通过 v-if 切换输入框与文本显示。
代码示例：
<el-table-column prop="name"><template #default="{ row }"><el-input v-if="row.isEditing" v-model="row.name" @blur="saveEdit(row)" /><span v-else @dblclick="row.isEditing = true">{{ row.name }}</span></template>
</el-table-column>
2、数据保存与验证
失焦保存： 输入框 @blur 事件触发保存操作，提交接口更新数据。
示例方法：
saveEdit(row) {row.isEditing = false;this.$axios.post('/update', row); // 提交修改
}
三、特殊场景处理
1、多表格高亮冲突
解决方案： 通过动态ref标识不同表格，独立管理每表的高亮行5：
<el-table :ref="`table_${index}`" @row-click="changeHighlight(row, index)">
changeHighlight(row, tableIndex) {this.currentRow[tableIndex] = row; // 按表格索引存储高亮行
}
2、iOS 双击兼容性问题
问题现象： iOS Safari/Chrome 中双击选择框需两次点击生效。
修复方案： 覆盖 Element UI 滚动条样式强制显示滚动条：
.el-scrollbar__bar { opacity: 1 !important; }
四、性能与交互优化
1、批量编辑防抖
频繁编辑时，通过防抖函数延迟提交请求，减少接口调用次数。
示例代码：
import { debounce } from 'lodash';
saveEdit: debounce(function(row) {// 提交逻辑
}, 500)
2、斑马纹与焦点样式
添加stripe属性启用斑马纹，通过 :row-class-name 自定义焦点行样式：
<el-table stripe :row-class-name="setRowStyle">
总结实现步骤
1. 事件绑定 → 选择 @cell-dblclick 或 @row-dblclick 监听双击；
2. 状态切换 → v-if 控制编辑态与展示态切换；
3. 数据持久化 → 失焦保存或结合防抖提交接口；
4. 兼容性处理 → iOS 样式覆盖解决双击异常。