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.mzph.cn/news/703851.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

外包干了3个月,技术倒退明显...

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

嵌入式Qt 实现用户界面与业务逻辑分离

一.基本程序框架一般包含 二.框架的基本设计原则 三.用户界面与业务逻辑的交互 四.代码实现计算器用户界面与业务逻辑 ICalculator.h #ifndef _ICALCULATOR_H_ #define _ICALCULATOR_H_#include <QString>class ICalculator { public:virtual bool expression(const QSt…

人脸2D和3D道具SDK解决方案提供商

人脸识别和增强现实技术成为了许多企业和开发者关注的焦点&#xff0c;为了满足市场对高质量、易于集成的人脸识别SDK的需求&#xff0c;美摄科技推出了一系列领先的人脸2D/3D道具SDK解决方案。 一、产品特点 高精度识别&#xff1a;美摄科技的人脸识别技术采用深度学习算法&…

接口测试用例设计注意点

API接口测试&#xff1a; 1>根据接口文档&#xff0c;检查接口调用方法post/get&#xff0c;状态码、请求值、返回值 2>对请求参数做容错、边界值、等价类校验 3>功能可用&#xff0c;用户友好 4>密码加密&#xff0c;http明文&#xff0c;https协议密文 5>业务…

小程序学习五(实现一个简单的基础库)

因为有个公司又是搞小程序容器的&#xff0c;而且老是问我相关问题&#xff0c;不得已只能再次复习一下。 os: 其实只要理解了vdom&#xff0c;然后再了解一点编译相关的知识之后好像也没啥需要特别了解的。。。 html页面 <!DOCTYPE html> <html lang"en"…

C++——二叉搜索树

二叉搜索树 二叉搜索树&#xff1a; 又为搜索二叉树&#xff0c;一般具有以下的性质 若它的左子树不为空&#xff0c;则左子树上所有的节点的值都小于父亲节点若它的右子树不为空&#xff0c;则右子树上所有的节点的值都大于父亲节点它的左右子树也都为二叉搜索树 二叉搜索树…

漏电保护继电器 导轨安装 零序电流互感器配套使用DJ-ZB1 DH-30L

系列型号&#xff1a; DJ-ZB1剩余&#xff08;漏电&#xff09;电流保护继电器 DJ-ZB2剩余&#xff08;漏电&#xff09;电流保护继电器 DJ-ZB3剩余&#xff08;漏电&#xff09;电流保护继电器 DJ-ZB4剩余&#xff08;漏电&#xff09;电流保护继电器 DJ-ZB5剩余&#xff08;漏…

pytorch保存张量为图片

这里用到的是torchvision中的save_image。 废话不多说&#xff0c;直接来代码&#xff1a; import torch from torchvision.utils import save_image B, C, H, W 64, 3, 32, 32 input_tensor torch.randn(B, C, H, W) save_image(input_tensor, "hh.png", nrow8)…

Shell脚本入门:从基础到实践,轻松掌握Shell编程

前言 在数字化和信息化的今天&#xff0c;计算机和操作系统成为了我们生活和工作中不可或缺的一部分。对于经常使用计算机的人来说&#xff0c;Shell&#xff08;命令行界面&#xff09;是一个非常重要的工具。而Shell脚本&#xff0c;则是对命令行操作的一种自动化和批量化处…

stm32:timer模块,如何计数,计数模块很简单,但是需要注意分频的设置,分频设置为7199,

首先看配置项 计数模块很简单&#xff0c;但是需要注意分频的设置&#xff0c;分频设置为7199&#xff0c; 然后计数寄存器里的值65535作为默认值&#xff0c;也可以在matlab里修改 下图为配置项目&#xff1a; 下图为matlab模型&#xff1a; 下图为运行结果&#xff1a; 计…

python(ch2)

可变长编码和不可变长编码 可变长编码是指不同字符使用不同数量的字节进行编码。例如&#xff0c;UTF-8 编码中&#xff0c;ASCII 字符使用 1 个字节编码&#xff0c;而其他语言的字符使用 2 个或更多字节编码。 不可变长编码是指所有字符都使用相同数量的字节进行编码。例如…

甲氧基 PEG4 二苯并环辛烯,mPEG4 DBCO,可以与多种基团发生反应

甲氧基四聚乙二醇二苯并环辛烯&#xff0c;甲氧基 PEG4 二苯并环辛烯&#xff0c;mPEG4 DBCO&#xff0c;DBCO mPEG4&#xff0c;m-PEG4-DBCO&#xff0c;mPEG4-DBCO&#xff0c;可以与多种基团发生反应 您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;甲氧基四聚乙…

【Python_Zebra斑马打印机编程学习笔记(三)】解决ZPL指令无法显示中文的问题

解决ZPL指令无法显示中文的问题 解决ZPL指令无法显示中文的问题前言一、问题描述二、字符集、码表文件、字库文件1、字符集2、码表文件3、字库文件 三、两种设置中文字体的方式1、通过设置字符集、码表文件、字库文件改变默认字体2、通过^CF指令设置标准字体名称改变默认字体 解…

Linux命令行常用命令

初识shell shell是系统的用户界面&#xff0c;提供了用户与内核进行交互操作的一种接口。它接收用户输入的命令并把它送入内核去执行。实际上shell是一个命令解释器&#xff0c;它解释用户输入的命令并且把用户的意图传达给内核。&#xff08;可以理解为用户与内核之间的翻译官…

【算法训练营】最小交换,楼尔邦德,最短路(python实现)

最小交换 时间限制&#xff1a;4 sec 空间限制&#xff1a;256 MB 问题描述 给定一个 1 到 n 的排列&#xff08;即一个序列&#xff0c;其中 [1,n] 之间的正整数每个都出现了恰好 1 次&#xff09;。 你可以花 1 元钱交换两个相邻的数。 现在&#xff0c;你希望把它们升序排序…

如何本地部署LightPicture结合cpolar内网穿透打造个人云图床

文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进&#xff0c;功能也越来越多&#xff0c;而手机…

还不知道随身WiFi这个蓝海市场怎么做?这个一定要看!适合30-40岁轻资产小生意

有没有发现你身边的人最近都在失业&#xff1f;无论是国企的、事业编的、又或者是民营企业的都在欠薪或者失业&#xff0c;看来经济寒潮是真的来了。虽然经济大环境不好&#xff0c;但是仍然涌现出了物联网、人工智能、大数据等新兴的蓝海市场。可是很多创投圈的朋友都表示&…

Spring-Boot常见的应用属性配置集

深入之前先用好&#xff0c;用好之前先全面了解功能。 全面了解功能可以从官方文档的配置参数选项作为切入点。 Appendix A. Common application properties - Spring # # COMMON SPRING BOOT PROPERTIES # 常见的Spring Boot属性集 # # This sample file is provided as a g…

CPU 算力分配(C语言)

题目来自于博主算法大师的专栏&#xff1a;最新华为OD机试C卷AB卷OJ&#xff08;CJavaJSPy&#xff09; https://blog.csdn.net/banxia_frontend/category_12225173.html 题目描述 现有两组服务器A和B&#xff0c;每组有多个算力不同的CPU&#xff0c;其中 A[i] 是 A 组第 i …

【机器学习学习脉络】

机器学习学习脉络 基础知识 数学基础 线性代数概率论与数理统计微积分最优化理论 编程基础 Python编程语言数据结构与算法软件工程原则 计算机科学基础 操作系统网络通信数据库系统 机器学习概论 定义与发展历程机器学习的主要任务和应用领域基本术语和概念 监督学习 线…