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;美摄科技的人脸识别技术采用深度学习算法&…

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;可以理解为用户与内核之间的翻译官…

如何本地部署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;但是仍然涌现出了物联网、人工智能、大数据等新兴的蓝海市场。可是很多创投圈的朋友都表示&…

15:00面试,15:06就出来了,问的问题过于变态了。。。

我从一家小公司转投到另一家公司&#xff0c;期待着新的工作环境和机会。然而&#xff0c;新公司的加班文化让我有些始料未及。虽然薪资相对较高&#xff0c;但长时间的工作和缺乏休息使我身心俱疲。 就在我逐渐适应这种高强度的工作节奏时&#xff0c;公司突然宣布了一则令人…

蓝桥杯-最小砝码

知识点&#xff1a;本题主要考察任何一个物体都可以用 3进制表示。 #include <iostream> #include<cmath> using namespace std; //知识点:任何一个物体都可以用 3进制表示 int main() { int n; cin >> n; int sum 0; for (int i 0;; i)…

vue2实现无感刷新token

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 &#x1f4d8; 引言&#xff1a; &#x1f4…

【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(上)

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

携程token算法分析

声明 本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 如有侵权,请联系我进行删除。 这里只是我分析的分析过程,以及一些重要点的记录…

[云原生] k8s中kubectl陈述式资源管理

一、管理k8s核心资源的两种基本方法 陈述式资源管理方法 --主要依赖命令行工具kubectl进行管理 优点 可以满足90%以上的使用场景 对资源的增、删、查操作比较容易 缺点 命令冗长&#xff0c;复杂&#xff0c;难以记忆 特定场景下&#xff0c;无法实现管理需求 对资源的修改…