快捷導(dǎo)航

el-table表格點(diǎn)擊該行任意位置時(shí)也勾選上其前面的復(fù)選框

更新時(shí)間：2025年02月12日 11:33:25 作者：Angel_girl319

本文主要介紹了在el-table組件中實(shí)現(xiàn)雙擊表格某一行任意位置自動(dòng)勾選復(fù)選框的功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

需求：當(dāng)雙擊表格某一行任意位置時(shí)，自動(dòng)勾選上其前面的復(fù)選框

1、在el-table 組件的每一行添加@row-dblclick事件，用于雙擊點(diǎn)擊

  <el-table
        :data="tableData"
        ref="tableRef"
 @selection-change="handleSelectionChange"
        @row-dblclick="handleRowClick"
      >
<el-table-column type="selection" fixed width="55" align="center" />
        <el-table-column
          type="index"
          fixed
          label="序號(hào)"
          width="75"
          align="center"
        />
</el-table>

2、定義方法在 `handleRowClick` 方法中，通過(guò)修改 `row` 對(duì)象中的某個(gè)屬性來(lái)標(biāo)記該行是否被選中，調(diào)用 `toggleRowSelection` 方法來(lái)切換多選框的勾選狀態(tài)。

const sourceRef = ref();
//雙擊
const handleRowClick = (row) => {
  console.log(row, "雙擊--");
  row.isSelected = !row.isSelected;
  tableRef.value.toggleRowSelection(row);
};

到此這篇關(guān)于el-table表格點(diǎn)擊該行任意位置時(shí)也勾選上其前面的復(fù)選框的文章就介紹到這了,更多相關(guān)el-table 任意位置勾選復(fù)選框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

VUE路由name的用法詳解
name 屬性是可選的,不寫它似乎也“沒(méi)問(wèn)題”,但其實(shí)它在某些場(chǎng)景中非常重要,下面我們來(lái)詳細(xì)說(shuō)明它的作用和典型用法,感興趣的朋友跟隨小編一起看看吧
2025-05-05
Vue 組件事件觸發(fā)和監(jiān)聽(tīng)實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue 組件事件觸發(fā)和監(jiān)聽(tīng)實(shí)現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
vue中EventBus的使用教程詳解
在Vue中,使用EventBus可以實(shí)現(xiàn)組件間的通信,如何使用EventBus？?都需要做哪些配置呢？他的注意事項(xiàng)是什么呢？下面就跟隨小編一起學(xué)習(xí)一下吧
2024-02-02
VUE 全局變量的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Vue狀態(tài)管理工具Pinia的安裝與使用教程
這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學(xué)習(xí)如何將pinia運(yùn)用到項(xiàng)目實(shí)戰(zhàn)中去,文中有詳細(xì)的安裝教程和使用方法,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2024-03-03
vue?ant?design?封裝彈窗表單的使用
這篇文章主要介紹了vue?ant?design?封裝彈窗表單的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
這篇文章主要介紹了vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue中的config目錄下index.js解讀
這篇文章主要介紹了vue中的config目錄下index.js解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
一文帶你搞懂Vue3?defineModel中的雙向綁定
隨著vue3.4版本的發(fā)布,defineModel也正式轉(zhuǎn)正了,它可以簡(jiǎn)化父子組件之間的雙向綁定,是目前官方推薦的雙向綁定實(shí)現(xiàn)方式,下面就跟隨小編一起深入了解一下defineModel的使用吧
2024-02-02
vuejs使用$emit和$on進(jìn)行組件之間的傳值的示例
本篇文章主要介紹了vuejs使用$emit和$on進(jìn)行組件之間的傳值的示例，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-10-10