vue中循环多个li(表格)并获取对应的ref的操作代码
更新时间：2024年02月27日 10:17:48 作者：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循环多个表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue的三种路由模式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
el-tooltip配合el-button禁用时显示提示的问题
这篇文章主要介绍了el-tooltip配合el-button禁用时显示提示的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
这篇文章为大家详细介绍了vue.js中$watch的用法，文中给出了示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友们可以一起看看吧。2016-10-10
这篇文章主要介绍了vue项目build打包后部分样式错乱的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了Vue自定义验证之日期时间选择器详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
在环保仓管项目中,做了一个每月对药品、消耗品、设备的进出,进行统计百分比,效果好看,后面经常在用这个样式,下面通过示例代码分享Vue3 Echarts通用的折线图带阴影效果实现,感兴趣的朋友一起看看吧2024-07-07
el-select 数据回显,只显示value不显示lable问题
这篇文章主要介绍了el-select 数据回显,只显示value不显示lable问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
uniapp vue3中使用webview在微信小程序实现双向通讯功能
微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用webview进行开发实现需求,这篇文章主要给大家介绍了关于uniapp vue3中使用webview在微信小程序实现双向通讯功能的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue 切换页面(路由)时如何保持滚动条回到顶部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家介绍了项目开发中husky的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论