解决js修改el-cascader值还保留上次选择路径问题，恢复默认状态

已于 2023-04-23 17:41:22 修改
阅读量804 收藏
点赞数
文章标签： javascript 前端 vue.js
于 2023-04-23 17:39:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/thisnewpoaple/article/details/130326817
版权
在Vue.js应用中，这段代码用于操作Cascader组件。`this.$refs.cascader.$refs.panel.activePath=[]`清空了级联选择器的活动路径，而`this.$refs.cascader.$refs.panel.syncActivePath()`则同步了这个路径，通常用于更新或设置用户在级联菜单中的当前选中状态。

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

this.$refs.cascader.$refs.panel.activePath = []
this.$refs.cascader.$refs.panel.syncActivePath()
el-cascader重置级联面板
熙冰
08-19 1901
<template> <div class='cascaderRecovery'> <el-cascader v-model="value" :options="options" ref="cascaderRef" @visible-change="handleVisibleChange" clearable> </el-cascader> .
基于element-ui的级联多选选择器:el-cascader-multi
热门推荐
charming的博客
04-30 3万+
基于element-ui的级联多选选择器，友好显示下拉箭头，样式与element一致，支持多选与级联选择器的大部分功能。 在线demo github地址（含更新日志） npm地址 效果预览 install 安装 npm i el-cascader-multi --save use 使用 在main.js中写入下面的代码 import elCascaderMulti from "el-cas...
elementUI联级选框el-cascader的选项重置
qq_32687373的博客
10-15 1838
// 数据修改时，因为数据的层级不同，所以可选的层级也不同 let panel = this.$refs.cascader.panel // id为需要修改的数据的id, oldId为上一条被修改的数据的id // 不同时，需要清空已选择的选项 if (id !== oldId) { panel.clearCheckedNodes() panel.activePath = [] panel.syncActivePath() } // 上面提到的层级不同，需要重置选项面板，重新获取数据 if (l
el-cascader 联级选择器 历史记录遗留
最新发布
qq_65370869的博客
04-03 203
在vue3用联级选择器的时候发现了一个问题，第二次打开的时候会默认展开第一次选择的数据，并没有重置，网上找了一些方案，调用clean()方法等，亲测没用。这是element-plus 官网给的方案，在网上找的例子说要改源码，还是建议用clean（）或者清空v-model。清空v-model的值 -- 也没用 他还是默认展开上次选择的数据。
ElementUI el-cascader级联选择器显示上次选中数据回显
qq_52337177的博客
01-03 2211
ElementUI el-cascader级联选择器显示上次选中数据回显
Element-UI重置级联框el-cascader为默认状态恢复默认选项
zhf_123666的博客
04-30 1195
<el-cascader size="large" style="width:100%" :options="options" v-model="selectedOptions" placeholder="填写县/区名称可以自动搜索" filterable ref="cascader" @change="handleChange"> </el-cascader> resetPlace(){ const.
el-cascader级联选择器重置
weixin_40825488的博客
12-02 1088
清空选中节点和高亮 this.$nextTick(() => { this.$refs["province"].$refs.panel.clearCheckedNodes(); this.$refs["province"].$refs.panel.activePath = []; })
elementUI的级联组件el-cascader重置问题
LiangRZ
05-18 2320
// 清空地区选中节点和高亮节点 this.$nextTick(() => { this.$refs.locationCascader.$refs.panel.clearCheckedNodes() this.$refs.locationCascader.$refs.panel.activePath = [] }) 当前页使用重置，获取到ref=locationCascader的级联组件，在进行上述操作即可； // 清空地区选中节点和高亮节点 this.$nextTick(..
element-ui使用Cascader 级联选择器遇到的问题
fangqi20170515的博客
04-11 1368
方法1：将radio隐藏，扩大选中区域，点击红色框的区域选中值，点击箭头所在蓝色框的区域，展示子选项。方法2：修改次级菜单的展开方式，默认的是‘click’，鼠标移入时展示子选项。具体为啥不知道，然后通过百度尝试了各种方法解决了这个问题。，但是这种方式，当嵌套过深的时候，体验就不是很好。
el-cascader 选择后保存中文路径
01-15
### 实现 el-cascader 选择后保存中文路径 为了实现在使用 `el-cascader` 组件时保存所选的中文路径，可以利用组件提供的事件和属性来获取并处理用户的选择。具体方法是在监听到用户的选项变化时，提取对应的标签...
el-cascader选中一个全部选择上了 el-select-group
03-25
### 关于 `el-cascader` 组件单个选项选中后整组全选的问题 在 Element UI 的 `el-cascader` 组件中，默认情况下，当用户点击某个节点时，可能会触发其父级分组的全部选中行为。这种现象通常是因为组件默认的行为...
el-cascader默认选中全部值
01-08
### element-ui 中 el-cascader 组件默认全选设置 为了使 `el-cascader` 组件能够默认全选所有值，可以采用两种主要策略来实现这一目标。一种是在初始化时通过编程方式设定已选项；另一种则是自定义组件逻辑以支持...
el-cascader v-model 绑定值改变了，但是界面没变化
qq_42440919的博客
02-21 3375
el-cascader v-model 双向绑定 更新
elementui 恢复级联框el-cascader的默认状态
Misko的博客
07-10 3283
单纯改变v-model值会有下面的情况，保留了上次的选择路径，与需求不符，所以针对这种情况做了下级联面板的重置。 在官网demo基础上做修改（代码1），增加ref。新增个按钮做重置操作（代码2） // 代码1 <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader ref="cascader" v-model="value
el-cascader 插件选中菜单不消失问题(已解决)。
Dyaping的博客
09-02 1813
如下图所示：选中之后下拉选择框定位到顶部，并且一直不消失。 找了无法办法，网上说可以设置它的dropDownVisible.测试后无效果，没什么反应。 that.$refs.elcascader.dropDownVisible = false 最后只能原生Dom操作，解决办法： document.querySelectorAll(".el-cascader__dropdown").forEach(item =>{ if(item.style.display ..
element组件cascader动态设置选择值
mollerlala的博客
04-03 6978
开发时遇到的问题描述，解决方法，心路历程。 问题描述： 动态设置cascader的取值，发现输入框正确了，但是展开的弹层样式选中有问题 见图解释，数据来源于官网： 下图是页面初始化时的默认值 现在项目场景是需要在js里动态改变cascader的选择值，比如，让级联选择器选中组件》Data》Tag标签： <el-form-item label="选择" prop="treeV...
elementui 恢复级联菜单el-cascader的默认状态
ocean_stars的博客
10-14 3102
单纯改变v-model值或者清空v-model值会有下面的情况，保留了上次的选择路径，与需求不符，所以针对这种情况做了下级联面板的重置。 在官网demo基础上做修改（代码1），增加ref。新增个按钮做重置操作（代码2） // 代码1 <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader ref="cascader" v-mod
el-cascader 级联选择器清空初始化
灰色头像@的博客
03-22 2902
级联选择器在清空了输入框之后，需要同时清空弹框里面的选中样式、高亮、以及回归初始化状态只展开一级菜单：【图1 变 图2】
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值