快捷導(dǎo)航

vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼

更新時(shí)間：2024年02月27日 10:17:48 作者：Jet_closer

我想要獲取每一個循環(huán)并獲取每一個li(或者其它循環(huán)項(xiàng))的ref,以便于后續(xù)的操作,接下來通過本文給大家分享vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧

有種場景是這樣的

 <ul>
    <li v-for="(item,index) in data" :key="index" ref="???">{{item}}</li> 
 </ul> //key值在項(xiàng)目中別直接用index，最好用id或其它關(guān)鍵值
 const data =[1,2,3,4,5,6]

我想要獲取每一個循環(huán)并獲取每一個li(或者其它循環(huán)項(xiàng))的ref，以便于后續(xù)的操作。

可以用以下的方法獲取每一個項(xiàng)目的ref

   <ul>
       <li v-for="(item,index) in tableData" :key="index" :ref="el => getRef(el, index)">{{item}}</li>
  </ul> //key值在項(xiàng)目中別直接用index，最好用id或其它關(guān)鍵值

這樣可以獲取對應(yīng)li的ref了

//儲存每一個ref
const refList = ref([])
const getRef = (el, index) => {
    consol.log(el, index)
    if (el) {
        refList.value[index] = el;
    }
}

打印(el, index)的值如下

那么refList.value就是所有l(wèi)i的集合的ref，這樣就可以繼續(xù)進(jìn)行后續(xù)的操作了。

舉例：如果我想要進(jìn)行全選表格項(xiàng)或者清空表格項(xiàng)，就可以用下面的代碼

//全選
 refList.value.forEach(ref => {
     ref.toggleAllSelection();
 });
//取消全選
 refList.value.forEach(ref => {
     ref.clearSelection()
 })

到此這篇關(guān)于vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼的文章就介紹到這了,更多相關(guān)vue循環(huán)多個表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3中Hooks函數(shù)的使用及封裝思想詳解
Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式，簡單來說，就是將單獨(dú)功能的js代碼抽離出來，?加工成公共函數(shù)，從而達(dá)到邏輯復(fù)用，下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧
2023-06-06
一文詳析vue3?Props的用法(父傳子)
這篇文章主要給大家介紹了關(guān)于vue3?Props的用法(父傳子)的相關(guān)資料,在Vue3中Props用于組件間數(shù)據(jù)傳遞,允許類型檢查和默認(rèn)值設(shè)置,文中將用法介紹的非常詳細(xì),需要的朋友可以參考下
2024-10-10
使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實(shí)現(xiàn)tab切換的思考,需要的朋友可以參考下
2018-09-09
Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解
這篇文章主要介紹了Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
使用vuex的時(shí)候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時(shí)候,出現(xiàn)this.$store為undefined問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
VueJs組件prop驗(yàn)證簡單介紹
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時(shí)候?qū)魅氲闹底雠袛?，今天小編通過一個小例子給大家分享VueJs組件prop驗(yàn)證簡單理解，感興趣的朋友一起看看吧
2017-09-09
淺談VUE單頁應(yīng)用首屏加載速度優(yōu)化方案
這篇文章主要介紹了淺談VUE單頁應(yīng)用首屏加載速度優(yōu)化方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Element的Pagination分頁sync問題小結(jié)
本文主要介紹了Element的Pagination分頁sync問題小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能
在做后臺管理系統(tǒng)項(xiàng)目的時(shí)候,產(chǎn)品增加了一個在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實(shí)如果說在外部增加按鈕實(shí)現(xiàn)全選或者清空的話,功能比較簡單的,下面給大家分享Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下
2024-05-05
v-slot和slot、slot-scope之間相互替換實(shí)例
這篇文章主要介紹了v-slot和slot、slot-scope之間相互替換實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09