快捷導(dǎo)航

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

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

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

有種場景是這樣的

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

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

可以用以下的方法獲取每一個項目的ref

   <ul>
       <li v-for="(item,index) in tableData" :key="index" :ref="el => getRef(el, index)">{{item}}</li>
  </ul> //key值在項目中別直接用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ù)進行后續(xù)的操作了。

舉例：如果我想要進行全選表格項或者清空表格項，就可以用下面的代碼

//全選
 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)文章

Vue的三種路由模式總結(jié)
這篇文章主要介紹了Vue的三種路由模式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
el-tooltip配合el-button禁用時顯示提示的問題
這篇文章主要介紹了el-tooltip配合el-button禁用時顯示提示的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-06-06
vue.js中$watch的用法示例
這篇文章為大家詳細介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋友們可以一起看看吧。
2016-10-10
vue項目build打包后部分樣式錯亂的解決
這篇文章主要介紹了vue項目build打包后部分樣式錯亂的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue自定義驗證之日期時間選擇器詳解
這篇文章主要介紹了Vue自定義驗證之日期時間選擇器詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-02-02
Vue3 Echarts通用的折線圖帶陰影效果實現(xiàn)
在環(huán)保倉管項目中,做了一個每月對藥品、消耗品、設(shè)備的進出,進行統(tǒng)計百分比,效果好看,后面經(jīng)常在用這個樣式,下面通過示例代碼分享Vue3 Echarts通用的折線圖帶陰影效果實現(xiàn),感興趣的朋友一起看看吧
2024-07-07
el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題
這篇文章主要介紹了el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能
微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進行開發(fā)實現(xiàn)需求,這篇文章主要給大家介紹了關(guān)于uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能的相關(guān)資料,需要的朋友可以參考下
2024-07-07
vue切換頁面(路由)時如何保持滾動條回到頂部
這篇文章主要介紹了vue 切換頁面(路由)時如何保持滾動條回到頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
項目開發(fā)中husky的使用詳解
這篇文章主要為大家介紹了項目開發(fā)中husky的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11