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()
 })

--------------------end

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/412216.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

oracle官网下载早期jdk版本

Java Downloads | Oracle JDK Builds from Oracle 以上压缩版&#xff0c;以下安装版 Java Downloads | Oracle 该链接往下拉能看到jdk8和jdk11的安装版 -- end

【初始RabbitMQ】高级发布确认的实现

在生产环境中由于一些不明原因&#xff0c;导致 rabbitmq 重启&#xff0c;在 RabbitMQ 重启期间生产者消息投递失败&#xff0c; 导致消息丢失&#xff0c;需要手动处理和恢复。于是&#xff0c;我们开始思考&#xff0c;如何才能进行 RabbitMQ 的消息可靠投递呢&#xff1f; …

Untiy webgl iis服务器加载ab包报404.3,需要为AB包添加MIMI映射

首选确定一下文件在不在 这里是缺少对于AB文件类型的映射&#xff0c;因为AB包没有后缀名&#xff0c;我们为服务器添加通用的映射 开始菜单搜索iis管理器&#xff0c;进入mimie类型 右侧点击添加按钮 文件扩展名为. 类型为application/octet-stream &#xff08;字节流&…

Android 输入法框架简介

每种平台都有自己的输入法框架. GNU/Linux 桌面环境有多种输入法框架, 比如 ibus, fcitx 等. 但是 Android 操作系统只有一种, 是统一提供的输入法框架. 相关链接: 《ibus 源代码阅读 (1)》 https://blog.csdn.net/secext2022/article/details/136099328https://developer.and…

深入理解 JavaScript 对象原型,解密原型链之谜(上)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

前端Vue项目无法启动服务,提示无 ‘dev‘ npm的脚本问题解决

目录 一、问题详情 二、问题解决 一、问题详情 上周还能运行的项目&#xff0c;今天突然无法执行了&#xff0c;连最基本的启动按钮也没有了&#xff0c;所有的项目本地都突然跑不起来了&#xff0c;附上截图。 二、问题解决 后来排查的根本原因有点奇葩&#xff0c;是因为…

C语言--- 指针(3)

一.字符指针变量 在指针的类型中&#xff0c;我们知道有一种指针类型为字符指针char * 一般使用&#xff1a; #include<stdio.h> int main() {char ch a;char* p &ch;*p b;printf("%c\n",ch);return 0; } 其实还有一种使用方式 &#xff1a; #inc…

JSP实现数据传递与保存(一)

一、Web开发步骤 1.1两类模式 后端——————前端 先有前端&#xff0c;前端用的时候直接调用 后端已实现注册接口&#xff0c;接口名为doRegister.jsp 前端此时&#xff1a; 前端的form表单中的action提交地址就只能填doRegister.jsp&#xff0c;即&#xff1a; <f…

ESD管理应用中的浪涌电阻?

静电放电 &#xff08;ESD&#xff09; 会对敏感的电子元件和电路造成严重破坏。为了保护电子设备免受ESD的影响&#xff0c;系统设计人员采用了许多保护措施&#xff0c;包括浪涌电阻器。本文探讨了浪涌电阻器在ESD管理应用中的作用。 首先是一个定义&#xff0c;术语脉冲通常…

Rider 2023:打造高效.NET项目的智能IDE,让开发更简单mac/win版

JetBrains Rider 2023激活版下载是一款专为.NET开发者打造的强大集成开发环境&#xff08;IDE&#xff09;。这款IDE提供了丰富的功能&#xff0c;旨在帮助开发者更快速、更高效地编写、调试和测试.NET应用程序。 Rider 2023 软件获取 Rider 2023在保持了其一贯的智能代码补全…

jmeter 数据库断言

当前版本&#xff1a; jmeter 5.6.3mysql 5.7.39 简介 本篇文章主要通过获取结果集断言&#xff0c;流程&#xff1a;先通过查看结果树获取正确结果&#xff0c;再将正确的结果放入文本断言中&#xff0c;直接启动即可。测试数据库的详细方法见另一篇文章&#xff1a; https:/…

设计模式(八)外观模式

相关文章设计模式系列 1.外观模式简介 外观模式介绍 当我们开发Android的时候&#xff0c;无论是做SDK还是封装API&#xff0c;我们大多都会用到外观模式&#xff0c;它通过一个外观类使得整个系统的结构只有一个统一的高层接口&#xff0c;这样能降低用户的使用成本。 外观…

【c++leetcode】1382. Balance a Binary Search Tree

问题入口 DSW (DAY, STOUT & WARREN) ALGORITHM 时间复杂度O(n) class Solution { public:int makeVine(TreeNode* grand, int cnt 0){auto n grand->right;while (n ! nullptr){if(n->left ! nullptr){auto old_n n;n n->left;old_n->left n->righ…

基于Java SSM框架实现高考填报信息系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现高考填报信息系统演示 JAVA简介 Java主要采用CORBA技术和安全模型&#xff0c;可以在互联网应用的数据保护。它还提供了对EJB&#xff08;Enterprise JavaBeans&#xff09;的全面支持&#xff0c;java servlet API&#xff0c;JSP&#xff08;java serv…

消息中间件篇之Kafka-数据清理机制

一、Kafka文件存储机制 Kafka文件存储结构&#xff1a;一个Topic有多个分区。每一个分区都有多个段&#xff0c;每个段都有三个文件。 为什么要分段&#xff1f;1. 删除无用文件方便&#xff0c;提高磁盘利用率。 2. 查找数据便捷。 二、数据清理机制 1.日志的清理策略方案1 根…

关于python的数据可视化与可视化:数据读取

带着问题寻找答案可以使自己不再迷茫或者不知所措&#xff01; 了解什么python的数据可视化&#xff1f; 数据的读取&#xff08;一般伴随着课程文件中会进行提供和利用&#xff09; 数据可视化是将Python应用于大气海洋科学中数据处理及分析过程的重要环节&#xff0c;它可以…

Flutter SDK 常见问题

镜像配置 配置pub服务的镜像地址&#xff1a; export PUB_HOSTED_URLhttps://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn 第一次运行项目很慢&#xff0c;搜索整个Flutter SDK项目&#xff0c;使用以下内容替换google和mavenCentral仓…

进行模型测量这种量出来坡面的是平面面积还是真实面积?

斜面面积&#xff0c;不是表面积。 DasViewer是由大势智慧自主研发的免费的实景三维模型浏览器,采用多细节层次模型逐步自适应加载技术,让用户在极低的电脑配置下,也能流畅的加载较大规模实景三维模型,提供方便快捷的数据浏览操作。 #DasViewer##实景三维##三维重建##三维模型…

CKA认证,开启您的云原生之旅!

在当今数字化时代&#xff0c;云计算已经成为企业和个人发展的关键技术。而获得CKA&#xff08;Certified Kubernetes Administrator&#xff09;认证&#xff0c;将是您在云原生领域迈出的重要一步。 CKA认证是由Kubernetes官方推出的权威认证&#xff0c;它旨在验证您在Kuber…

嵌入式学习day25 Linux

进程基本概念: 1.进程: 程序&#xff1a;存放在外存中的一段数据组成的文件 进程&#xff1a;是一个程序动态执行的过程,包括进程的创建、进程的调度、进程的消亡 2.进程相关命令: 1.top 动态查看当前系统中的所有进程信息&#xff08;根据CPU占用率排序&a…
最新文章