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

最新推荐文章于 2024-09-04 09:32:48 发布
最新推荐文章于 2024-09-04 09:32:48 发布
阅读量728 收藏
点赞数 1
分类专栏： Vue3 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43953518/article/details/133694240
版权

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

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

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

在这里插入图片描述

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

let multipleTablesCascaderRef = {}

在这里插入图片描述

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

前端打工人
关注
专栏目录
在Vue组件中动态添加选择器
郭宝的博客
08-02 1889
核心代码： <template> <div> ============================75、动态添加选择器 ========================= <ul> <!-- :class="{'now':selectName === item.name}" 表示如果当...
vue3 循环设置 ref 并获取
qq_17627195的博客
03-15 2785
【代码】vue3 循环设置 ref 并获取。
Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区
最新发布
weixin_73060959的博客
09-04 1061
在Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区（甚至到更细分的级别，如街道、小区等）的联动选择是一个常见的需求。Element Plus的Cascader组件非常适合这样的场景，因为它支持多级联动。以下是一个基本的步骤和示例，说明如何在Vue 3项目中使用Element Plus的Cascader组件来实现省市区（甚至更多级）的联动选择。
Vue3 动态设置 ref
weixin_40557503的博客
01-24 2946
在一些场景，ref设置需要根据动态数据来决定，如表单中的正则验证，就需要给每一个from设置一个ref，进而进行正则效验。
Vue3设置动态ref
SongZhengxing_的博客
10-17 4109
【代码】Vue3设置动态ref。
vue3中使用ref
weixin_38225763的博客
03-05 640
el-form-item label="所属单位" prop="enterpriseId">console.log('Checkbox 的选中状态:', event);placeholder="请选择所属单位"label="是否输入"
vue3-ref和reactive
qq_52135740的博客
08-02 695
ref 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备注： 接收的数据可以是：基本类型、也可以是对象类型。 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据：内部
vue+elementUI实现级联表格el-table级联多选
WhyBecause的博客
12-01 2412
vue+elementUI实现级联表格el-table级联多选
Vue3.0中Element-Plus级联选择器——直接输出所选中的最后一级的数据
08-08 2919
<el-cascader placeholder="试试搜索：北京" :options="options" :props="{ multiple: true }" filterable @change="checkedData" collapse-tags ref="cascadeAddr"><.
vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法
mashirokayo的博客
10-07 2505
vue.js 3.0 setup风格 element-ui clearCheckedNodes
vue2实现移动端级联选择器
weixin_42230222的博客
02-12 5515
vue2实现的移动端级联选择器，用于多层级数据的选择，典型场景为省市区选择
Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3566
vue3，element plus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element plus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
Vue3使用ref绑定组件获取valueRef.value为null的解决
懒羊羊懒羊羊
07-08 1234
具体操作如下：（查询以后发现原先的ctx在线上会出现问题，需要使用proxy代替ctx）解决：使用getCurrentInstance去访问$refs里的方法。查看绑定和定义都没有问题，还是获取不到。
vue杂项用法$set,$ref,Promise用法,动态加载componets子组件,$attrs
ghx123456ghx的博客
03-29 1392
有时候给页面上一个对象的属性赋值的时候，虽然数据改变了，但是页面并没有展示刷新数据，可以如下处理 row.agreeRatio = 'sdfsd'---本句是无效的 ---可以使用如下语句 this.$set(row, 'agreeRatio', 'sdfsd') ...
vue3 动态设置ref
热门推荐
qq_42859450的博客
10-19 1万+
动态设置ref
Vue开发学习笔记:Vue3中使用标签的ref属性设置el-table点击单元格自动获取焦点
JustWantToFly的博客
05-09 5023
el-table使用ref标签属性设置单元格点击自动获取焦点
vue.js 细节
zhzwei的博客
12-09 304
ref 预期：string ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： <!-- `vm.$refs.p` will be the DOM node --> <p ref="p">hello</p> <!-- `vm.$refs.child` will be the child component instance
ant + vue3的table表格动态控制是否可选
Hannah_Hannah_的博客
11-10 507
四、根据选择的动态控制每条数据是否可选// 隐藏全选按钮// 选择框功能默认 -- 利用动态改变每条数据的参数来动态控制可选可不选}),// 每次选择完之后调用的函数//增加删除选中后的数据操作}else{//根据已选择的数据条件来动态限制可选可不选****if(record.status == '已开票'){bill_status.value = '已开票'if(item.status == '开票失败'){}else{bill_status.value = '开票失败'
cascader级联选择器
weixin_46852620的博客
02-04 191
<!-- options 用来指定数据源 --> <!-- props 用来指定配置对象 --> <!-- v-model选中项绑定值 --> <el-cascader :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" ...
vue3 级联选择器如何获取label的值
05-31
在Vue3中级联选择器通过v-model绑定一个数组，数组的每一项代表每个级别的选中值。如果想要获取每个选中项的label值，可以使用ref来获取级联选择器的实例，然后通过调用实例的方法获取选中项的label值。具体实现步骤如下： 1. 在template中定义级联选择器，并通过v-model绑定选中项的数组 ```html <el-cascader v-model="selectedValues" :options="options" @change="handleChange" ref="cascader" ></el-cascader> ``` 2. 在script中定义selectedValues数组和options选项列表 ```javascript export default { data() { return { selectedValues: [], options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' }, { value: 'xiaolv', label: '效率' }, { value: 'kekong', label: '可控' } ] }, { value: 'daohang', label: '导航', children: [ { value: 'cexiangdaohang', label: '侧向导航' }, { value: 'dingbudaohang', label: '顶部导航' } ] } ] } ] } }, methods: { handleChange(value) { // 获取级联选择器实例 const cascader = this.$refs.cascader // 遍历选中项数组，获取每个选中项的label值 const labels = value.map((item, index) => { const selectedOption = cascader.options[index].children.find( child => child.value === item ) return selectedOption.label }) console.log(labels) } } } ``` 3. 在handleChange方法中，首先通过ref获取级联选择器的实例，然后遍历选中项数组，通过选中项的value值在options中查找对应的选项对象，最后获取选项对象的label值，将label值存储在labels数组中。 注意：在获取级联选择器实例时，需要给级联选择器添加ref属性，然后通过this.$refs.cascader来获取实例。在遍历选中项数组时，需要根据选中项在options中的位置，找到对应的选项对象，再从选项对象中获取label值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值