有种场景是这样的
<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()
})
--------------------end