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