elementUI中的cascader级联选择器组件清除选中值

已于 2022-02-17 18:42:37 修改
阅读量1.8k 收藏
点赞数
分类专栏： 前端埋坑之路-前端技术 文章标签： elementui vue.js 前端
于 2022-02-17 18:37:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011565547/article/details/122989502
版权
当使用elementUI的cascader组件遇到多次联动问题时，可能会出现上次选中的第一级在下次打开时仍被选中，而第二级因异步加载无法正确请求和显示数据。为确保第二次打开时能正常请求并渲染数据，需要找到清除上次选中值的方法。参考今昔在的优快云博客，可以找到解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原因描述：多次联动；有时打开弹层，会出现上一次选的第一级被选中，而第二级是异步的；就导致第二步无法点击请求数据；

目标： 第二次打的时候；清除上次选中的；保证可以正常点击请求第二次的数据，并渲染展示 

个人觉得这个文档可以解决 ；就不再写啦：

https://blog.youkuaiyun.com/weixin_45336946/article/details/115481056

elementUI中的cascader级联选择器组件清除选中值_今昔在的博客-优快云博客

vue框架下 element 动态加载级联选择器主动清空内容
aj951225的博客
06-19 3709
做公司项目的时候需要用到级联选择器，获取数据后发现无法主动清空内容，主要尝试了网上几种方法，如主动触发clearable、还有什么鬼暴力清空方法和以下方法，均以失败告终。 let obj = {} obj.stopPropagation = () => {} try{ this.$refs.cascader.clearValue(obj) }catch(err){ this.$refs.cascader.handleClear(obj) } 后来在公司大佬的帮助下（小声点说，其实方法
【区分vue2和vue3下的element UI Cascader 级联选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
06-04 1207
在Vue 2的Element UI和Vue 3的Element Plus中，（级联选择器）组件用于从嵌套的数据中进行选择。以下是对这两个版本下组件的属性、事件和方法的详细介绍，并附带示例。
elementui el-cascader 清除级联选择框选中状态
qq_44981128的博客
11-18 1598
<el-cascader ref="cascader" v-model="optionsValue" :options="options" :props="Options" @change="handleChange" clearable> </el-cascader> 重置methods reset (...
el-cascader 清空 下拉选择数据没清空
最新发布
woniuyibuyibu的博客
04-23 370
/也可以是指定的值，默认返回值是数组，也可以返回单个值。el-cascader可能不会恢复到默认状态，而是保留上一次的高亮选择状态。注意 支持filter输入筛选 但是和原本选择事件不一样。// 清空 下拉选择的选项也清除。
解决VUE+ElementUI中cascader级联选择器组件自动清除选中值
前端打工人的博客
04-14 2837
之前在做公司的后台管理系统时，使用到了cascader这个组件。发现当你选中一个选项之后，除非手动删除，否则下次创建显示的还是之前选中的值。当时想了很多办法都不管用，最后查资料看到了一个解决方案。如下： let obj = {} obj.stopPropagation = () => {} try{ this.$refs.cascader.clearValue(obj) }catch...
el-cascader多选取消上次一级选中（一级单选，二级多选）
宁
09-22 1357
每次选择的时候取消上一次一级的选中，也相当于一级单选，二级多选。
element-ui Cascader 级联选择器清除选中
Lingling_12356的博客
11-27 1201
<el-col :span="24"> <el-form-item label="教室地址" prop="regionCode"> <el-cascader style="width: 100%;" class="input-width" ref="cascaderClassroom" expand-
解决ElementUI cascade级联选择器组件自动清除选中值的方法
不会有人真的学前端吧
08-16 2120
在做省市地级联选择器时，遇到的级联选择器重复点击问题回显上一个选择过的选项 这个问题确实挺烦人的，功能是不影响的，但是给人不是感觉特别的舒服 感谢大佬的解决方法elementUI的cascader级联选择控件使用采坑：设置默认值回显问题解决方案（亲测有效！） 解决方法： 1.这是我的cascader级联选择器代码 <el-cascader ref="cascader" style="width: 328px" .
element ui - Cascader 级联选择器 样式
Cyl0110的博客
12-05 1375
使用Cascader未设置样式时，列表高度会占据整个页面 可在全局样式文件中设置高度值 .el-cascader-panel{ height: 210px; } 去掉横向滚动条 .el-scrollbar__wrap{ overflow-x: hidden; } 文章参考与 element ui - Cascader 级联选择器 样式 - STRIVE-PHY - 博客园 感谢博主的分享 ...
element-ui —— element-ui el-cascader 级联选择器清除选中
qq_43201350的博客
06-08 616
<el-cascader v-model="value" :options="options" ref="cascader"> </el-cascader> // 清空级联选择器选中状态 this.$refs.cascader.$refs.panel.clearCheckedNodes()
elementUI Cascader 级联清空选中节点
疑问 搜索 动手 解决 记录
02-04 2749
给cascader组件设置一个ref // 清空级联选择器选中状态 this.$refs.cascader.$refs.panel.clearCheckedNodes() // 清除高亮 this.$refs.cascader.$refs.panel.activePath = [] 还有一种 let obj = {} obj.stopPropagation = () =>{} try{ this.$refs.cascader.clearValue(obj) }catch(err){
element-ui cascader 重置按钮触发清空操作
Sicily_winner的博客
07-13 7167
前言 有时候我们的提交表单会存在重置操作，那么会重置element-ui中的联级选择器，如果你是自定义组件的联级选择器，你会发现无法清空的情况，实际上你已经在父页面的reset方法中已经重置了下拉组件为空，但是页面上依旧残留着文字，如下图所示： 当点击重置按钮之后，新版用途文字虽然存在，但是已经和后面的clearable触发之后的结果是一样的！！ 也就是点击重置按钮的结果是我们想要的，但是页面上的文字是我们想要弄掉的。 那么我们的问题就是如何把页面上的文字清空掉！ 因为我这个下拉组件是子..
Element Cascader 级联选择器清除上次的点击记录
素味平生的博客
03-02 1697
问题：级联选择器点击但未选中时，再次点击触发打开时，还是上次点击的选项 需求：再次点击展开时，不展示上次展开点击的记录 解决方法： （一定要定义ref） <el-cascader ref="myCascader" size="medium" collapse-tags clearable :props="{ checkStrictly: true }" v-model="regionids" :options="regionList" /> //主要是这个 cons..
清除el-cascader中的数据
qq_42586147的博客
07-06 3637
清空el-cascader
Element Cascader清空几种方式
玲曦的博客
08-17 2630
Cascader无法清空？试试这几种方式。
element-plus el-cascader 级联组件清空所选数据方法
Taurus_666
10-12 2429
elementplus 级联组件一键清空所选值
elementui级联选择器怎么拿到选中的值
02-11
### 获取 ElementUI 级联选择器选中值 为了获取 `el-cascader` 组件中的选中值，可以利用组件的 `v-model` 属性绑定到一个变量来存储所选路径对应的 value 数组。对于 label 和完整的 pathLabel，则可以通过访问组件实例的方法实现。 当定义 `<el-cascader>` 标签时设置好 `ref` 属性以便后续通过 JavaScript 访问该组件实例： ```html <el-cascader ref="refCascader" v-model="queryParams.chinaAreaDataSelectedOptions" :options="chinaAreaDataOptions" :props="{ expandTrigger: 'hover', multiple: true }" @change="handleChange"> </el-cascader> ``` 在方法 `handleChange()` 中，使用 `$refs` 来获取级联选择器组件实例并调用其提供的 API 函数 `getCheckedNodes()` 返回所有已勾选项的信息对象数组。遍历这些信息对象可提取出所需的标签文本列表[^1]。 ```javascript handleChange() { const textArr = []; const arr = this.$refs["refCascader"].getCheckedNodes(); arr.forEach((node) => { textArr.push(node.pathLabels.join('/')); // 将每一项的pathLabels拼接成字符串形式 }); console.log('选中的labels:', textArr); } ``` 此外，在某些情况下可能还需要处理回显问题以及清除之前的选择情况。针对这些问题有专门的操作方式如 `clearCheckedNodes()` 可用于重置组件的状态[^2][^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

做个有准备的人

受益虽浅以资鼓励无限

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值