快捷導(dǎo)航

elementui中@row-click和@row-dbclick不能同時(shí)使用問(wèn)題及解決

更新時(shí)間：2026年05月05日 10:19:55 作者：Mr丶Ykk

在ElementUI中,@row-click和@row-dbclick不能同時(shí)使用,為同時(shí)響應(yīng)單擊和雙擊事件,可以通過(guò)@row-click事件結(jié)合定時(shí)器判斷點(diǎn)擊次數(shù)或自定義表格組件監(jiān)聽(tīng)鼠標(biāo)事件來(lái)實(shí)現(xiàn)

elementui中@row-click和@row-dbclick不能同時(shí)使用

在 Element UI 中，@row-click和@row-dbclick是表格組件（el-table）中用于監(jiān)聽(tīng)行點(diǎn)擊和雙擊事件的兩個(gè)事件屬性。

根據(jù) Element UI 的文檔，確實(shí)不能同時(shí)使用這兩個(gè)事件屬性。

如果您需要在表格行上同時(shí)響應(yīng)單擊和雙擊事件，可以通過(guò)以下方式解決：

使用@row-click事件，并結(jié)合定時(shí)器判斷點(diǎn)擊次數(shù)

<el-table @row-click="handleRowClick">
  <!-- 表格內(nèi)容 -->
</el-table>
javascript
// 在方法中定義一個(gè)點(diǎn)擊計(jì)數(shù)器和一個(gè)延時(shí)器
data() {
  return {
    clickCount: 0,
    timer: null
  };
},
methods: {
  handleRowClick(row) {
    this.clickCount++;
    
    // 判斷點(diǎn)擊次數(shù)，如果是首次點(diǎn)擊，則啟動(dòng)延時(shí)器
    if (this.clickCount === 1) {
      this.timer = setTimeout(() => {
        // 執(zhí)行單擊操作
        this.handleClick(row);
        this.resetClickCount();
      }, 300); // 設(shè)置延時(shí)時(shí)間，單位為毫秒
    } else {
      // 如果點(diǎn)擊次數(shù)大于1，則說(shuō)明是雙擊操作，清除延時(shí)器，并執(zhí)行雙擊操作
      clearTimeout(this.timer);
      this.handleDoubleClick(row);
      this.resetClickCount();
    }
  },
  handleClick(row) {
    // 單擊操作邏輯
  },
  handleDoubleClick(row) {
    // 雙擊操作邏輯
  },
  resetClickCount() {
    // 重置點(diǎn)擊計(jì)數(shù)器
    this.clickCount = 0;
  }
}

以上代碼中，使用@row-click事件監(jiān)聽(tīng)行的單擊操作。

首次點(diǎn)擊時(shí)，會(huì)啟動(dòng)一個(gè)延時(shí)器，若在指定時(shí)間內(nèi)再次點(diǎn)擊，則判斷為雙擊操作，清除延時(shí)器并執(zhí)行雙擊操作；如果在延時(shí)時(shí)間內(nèi)沒(méi)有再次點(diǎn)擊，則判斷為單擊操作，并執(zhí)行單擊操作。