?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 樣式覆蓋解決雙擊異常。