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 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式，简单来说，就是将单独功能的js代码抽离出来， 加工成公共函数，从而达到逻辑复用，下面小编就来和大家聊聊Hooks函数的使用及封装思想吧2023-06-06
这篇文章主要给大家介绍了关于vue3 Props的用法(父传子)的相关资料,在Vue3中Props用于组件间数据传递,允许类型检查和默认值设置,文中将用法介绍的非常详细,需要的朋友可以参考下2024-10-10
使用vue-router与v-if实现tab切换遇到的问题及解决方法
这篇文章主要介绍了vue-router与v-if实现tab切换的思考,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Vuex 单状态库与多模块状态库详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
使用vuex的时候,出现this.$store为undefined问题
这篇文章主要介绍了使用vuex的时候,出现this.$store为undefined问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
今天看了vuejs的组件，看到了prop组件，主要作用是在传入数据的时候对传入的值做判断，今天小编通过一个小例子给大家分享VueJs组件prop验证简单理解，感兴趣的朋友一起看看吧2017-09-09
这篇文章主要介绍了浅谈VUE单页应用首屏加载速度优化方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文主要介绍了Element的Pagination分页sync问题小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
Vue3+Ant design 实现Select下拉框一键全选/清空功能
在做后台管理系统项目的时候,产品增加了一个在Select选择器中添加一键全选和清空的功能,他又不让在外部增加按钮,其实如果说在外部增加按钮实现全选或者清空的话,功能比较简单的,下面给大家分享Vue3+Ant design 实现Select下拉框一键全选/清空功能,需要的朋友可以参考下2024-05-05
v-slot和slot、slot-scope之间相互替换实例
这篇文章主要介绍了v-slot和slot、slot-scope之间相互替换实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论