vue3中动态设置ref，如表格中使用级联选择器

news2024/11/26 13:35:55

需求：vue3中有一个表格，表格里是表单项，用户可以输入或选择，有一项是一个级联选择器，需要使用到ref，然后通过getCheckedNodes()方法获取到这一项选择的数据。

在这里插入图片描述
数据源是一个级联选择器，如果这个表单直接设置 ref是有问题的，选择后，第一次获取返回空，第二次获取的是第一次选择的数据。

在这里插入图片描述
如上图，直接设置ref是不行的，这个ref是需要动态设置才行。思考：直接加上索引不就行了吗？
是的，没错，请看下图这样设置

在这里插入图片描述

记得要定义一下，名字自己随便起，保持一致就行

let multipleTablesCascaderRef = {}

在这里插入图片描述

这样就可以使用ref获取了
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

c++视觉处理-----膨胀腐蚀

c++视觉处理-----膨胀腐蚀

c视觉处理膨胀腐蚀 膨胀腐蚀的区别 膨胀（Dilation）和腐蚀（Erosion）是形态学图像处理中的两种基本操作，它们有不同的效果和应用： 膨胀（Dilation）： 膨胀操作用于增加物体…
阅读更多...
Compose加载本地图片和网络图片

Compose加载本地图片和网络图片

加载本地图片 Image(modifier Modifier.fillMaxWidth().height(200.dp),painter painterResource(id R.drawable.img),contentDescription "描述",//0~1完全透明到完全不透明设置alpha 1f,//图片拉伸或裁剪设置contentScale ContentScale.Crop ) 加载本地图…
阅读更多...
AntV G6 dom节点绑定事件问题

AntV G6 dom节点绑定事件问题

问题&#xff1a; graph.on("node:click"&#xff0c; e > {})监听不到dom节点里面对应事件 比如dom节点里面自定义按钮和输入框&#xff0c;需要监听按钮点击和输入框聚焦事件 效果如下&#xff1a; 对应代码&#xff1a; <template><div id"c…
阅读更多...
数据结构：排序- 插入排序(插入排序and希尔排序) , 选择排序(选择排序and堆排序) , 交换排序(冒泡排序and快速排序) , 归并排序

数据结构：排序- 插入排序(插入排序and希尔排序) , 选择排序(选择排序and堆排序) , 交换排序(冒泡排序and快速排序) , 归并排序

目录 前言 复杂度总结 预备代码 插入排序 1.直接插入排序: 时间复杂度O(N^2) \空间复杂度O(1) 复杂度&#xff08;空间/时间&#xff09;&#xff1a; 2.希尔排序&#xff1a; 时间复杂度 O(N^1.3~ N^2&#xff09; 空间复杂度为O(1) 复杂度&#xff08;空间/时间&#…
阅读更多...
WiFi标签注册流程

WiFi标签注册流程

7.5寸桌牌&#xff1a;K: 注册键&#xff0c;R: 复位键 长按K键不动&#xff0c;绿灯长亮&#xff0c;再按一下R键&#xff0c;等待绿灯快闪后就可以松开按键&#xff0c;绿灯变慢闪&#xff0c;设备即可进入配置注册模式。 4.2寸标签&#xff1a;右键: 注册键&#xff0c;背后…
阅读更多...
网络安全70部学员第二阶段项目验收顺利结束

网络安全70部学员第二阶段项目验收顺利结束

网络安全70部的小伙伴 经过近三个月的学习 专业技能都有了质的飞跃 为了检验学员们的学习情况 同时巩固所学知识点&#xff0c;查漏补缺 近日&#xff0c;进行了网络阶段项目验收工作 项目背景&#xff1a;某公司由市场部、客服部、产品部、行政部、财务部、人事部以及总经…
阅读更多...
GNOME 45 动态三层缓存补丁更新

GNOME 45 动态三层缓存补丁更新

导读GNOME 45 "Rīga" 上周已正式发布&#xff0c;此版本虽然有许多针对桌面环境的改进&#xff0c;但上游缺少的一个功能是 Canonical 主导的 Mutter 动态三层缓存。 动态三层缓存用于在需要时提升性能&#xff0c;并且已被证明有助于提高桌面渲染性能&#xff0c;…
阅读更多...
10.selenium进阶

10.selenium进阶

上述我们学习了selenium入门的一些操作, 本节知识点学习一些selenium的高级用法 1、嵌套网页 ​ 在前端开发中如果有这么一个需求。一个页面上的内容要被其它页面所共用。也就是说两个或者两个以上的页面需要共同存在与同一个页面。在前端页面开发中可以把写好的代码在每个页面…
阅读更多...
HTML基础入门01

HTML基础入门01

目录 1.HTML基础 1.1HTML标签 1.2HTML 文件基本结构 1.3标签层次结构 1.4快速生成代码框架 2.HTML 常见标签 2.1注释标签 2.2标题标签: h1-h6 2.3段落标签: p 2.4.换行标签: br 3.综合案例: 展示博客 1.HTML基础 1.1HTML标签 HTML 代码是由 "标签" 构成…
阅读更多...
奥威BI系统：做数据可视化大屏，又快又简单

奥威BI系统：做数据可视化大屏，又快又简单

数据可视化大屏的制作难吗&#xff1f;会很花时间精力吗&#xff1f;这就要看用的是什么软件了。如果用的是BI系统&#xff0c;特别是奥威BI系统这类BI商业智能软件&#xff0c;那就是又快又简单。 奥威BI系统介绍&#xff1a; 奥威BI系统是一款高效的数据可视化大屏工具&…
阅读更多...
算法-动态规划/中心扩散法-最长回文子串

算法-动态规划/中心扩散法-最长回文子串

算法-动态规划/中心扩散法-最长回文子串 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/longest-palindromic-substring 1.2 题目描述 2 动态规划 2.1 思路 dp[i][j] 表示[i,j]之间的字符串是否是回文。 那么&#xff0c;如果chars[i] chars[j]时&#xff0c;就…
阅读更多...
ArmSoM-W3之RK3588安装ffmpeg

ArmSoM-W3之RK3588安装ffmpeg

1. 简介 FFmpeg 是一个完整的、跨平台的音频和视频录制、转换和流媒体解决方案。既是一款音视频编解码工具&#xff0c;同时也是一组音视频编解码开发套件&#xff0c;作为编解码开发套件&#xff0c;它为开发者提供了丰富的音视频处理的调用接口。 FFmpeg 提供了多种媒体格式…
阅读更多...
C++11打断线程的几种方式

C++11打断线程的几种方式

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pthread_cancel1.代码演示2.两个重要方法1.pthread_setcancelstate2.pthread_setcanceltype 3.资源回收 二、Boost1.看代码2.资源泄露2.资源回收 总结 前言…
阅读更多...
腾讯云2核4G服务器一年和三年价格性能测评

腾讯云2核4G服务器一年和三年价格性能测评

腾讯云轻量2核4G5M服务器&#xff1a;CPU内存流量带宽系统盘性能测评&#xff1a;轻量应用服务器2核4G5M带宽&#xff0c;免费500GB月流量&#xff0c;60GB系统盘SSD盘&#xff0c;5M带宽下载速度可达640KB/秒&#xff0c;流量超额按照0.8元每GB的价格支付流量费&#xff0c;轻…
阅读更多...
dubbo3+zookeeper/nacos+dubbo-admin

dubbo3+zookeeper/nacos+dubbo-admin

工程结构&#xff1a; 版本信息&#xff1a; jdk版本&#xff1a;1.8 springboot-parent版本&#xff1a;2.6.6 springboot版本&#xff1a;2.6.6 dubbo版本&#xff1a;3.0.7 curator版本&#xff1a;4.2.0 dubbo-registry-nacos版本&#xff1a;3.0.7注意事项&#xff1a;正…
阅读更多...
Apache Ranger：(二)对Hive集成简单使用

Apache Ranger：(二)对Hive集成简单使用

1.Ranger Hive-plugin安装 进入 Ranger 编译生成的目录下 找到 ranger-2.0.0-hive-plugin.tar.gz 进行解压 tar -zxvf ranger-2.0.0-hive-plugin.tar.gz -C /opt/module/ 2.修改配置文件 vim install.properties #策略管理器的url地址 POLICY_MGR_URLhttp://[ip]:6080#组件…
阅读更多...
今日头条文章采集ChatGPT3.5/4.0驱动浏览器改写文章软件说明文档

今日头条文章采集ChatGPT3.5/4.0驱动浏览器改写文章软件说明文档

大家好了&#xff0c;我是淘小白~ 今天给大家介绍的软件是一个款驱动浏览器改写文章的软件&#xff0c;下面给大家做一下介绍说明&#xff1a; 一、软件语言 Python编写的&#xff0c;使用的库是selenium库 二、具体逻辑 1、整理头条文章网址&#xff0c;需要自己整理&…
阅读更多...
网络基础知识面试题2

网络基础知识面试题2

VC++常用功能开发汇总（专栏文章列表，欢迎订阅，持续更新...）https://blog.csdn.net/chenlycly/article/details/124272585C++软件异常排查从入门到精通系列教程（专栏文章列表，欢迎订阅，持续更新...）
阅读更多...
VIM指令

VIM指令

vim的工作模式 vim一般有6种工作模式。 普通模式&#xff1a;使用vim打开一个文件时默认模式&#xff0c;也叫命令模式&#xff0c;允许用户通过各种命令浏览代码、滚屏等操作。 插入模式&#xff1a;也可以叫做编辑模式&#xff0c;在普通模式下敲击 i 、a 或 o 就进入插入模…
阅读更多...
【广州华锐互动】VR虚拟现实技术应用于新兵作战体验的优势

【广州华锐互动】VR虚拟现实技术应用于新兵作战体验的优势

随着虚拟现实(VR)技术的不断发展&#xff0c;越来越多的军校开始将其应用于军事训练中。VR技术可以通过模拟真实的环境和情境&#xff0c;为学员提供更加直观、生动的训练体验。本文将从以下几个方面阐述VR虚拟现实技术在军事作战演习中的应用场景。 1.战场模拟 通过VR技术&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023