vue中循环多个li(表格)并获取对应的ref的操作代码
作者：Jet_closer
我想要获取每一个循环并获取每一个li(或者其它循环项)的ref,以便于后续的操作,接下来通过本文给大家分享vue中循环多个li(表格)并获取对应的ref的操作代码,感兴趣的朋友跟随小编一起看看吧
有种场景是这样的
<ul>
<li v-for="(item,index) in data" :key="index" ref="???">{{item}}</li>
</ul> //key值在项目中别直接用index，最好用id或其它关键值
const data =[1,2,3,4,5,6]我想要获取每一个循环并获取每一个li(或者其它循环项)的ref，以便于后续的操作。
可以用以下的方法获取每一个项目的ref
<ul>
<li v-for="(item,index) in tableData" :key="index" :ref="el => getRef(el, index)">{{item}}</li>
</ul> //key值在项目中别直接用index，最好用id或其它关键值这样可以获取对应li的ref了
//储存每一个ref
const refList = ref([])
const getRef = (el, index) => {
consol.log(el, index)
if (el) {
refList.value[index] = el;
}
}打印(el, index)的值如下
那么refList.value就是所有li的集合的ref，这样就可以继续进行后续的操作了。
举例：如果我想要进行全选表格项或者清空表格项，就可以用下面的代码
//全选
refList.value.forEach(ref => {
ref.toggleAllSelection();
});
//取消全选
refList.value.forEach(ref => {
ref.clearSelection()
})到此这篇关于vue中循环多个li(表格)并获取对应的ref的操作代码的文章就介绍到这了,更多相关vue循环多个表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！