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

最新推荐文章于 2024-01-10 09:17:31 发布
最新推荐文章于 2024-01-10 09:17:31 发布
阅读量547 收藏 1
点赞数 1
文章标签： elementui vue.js 前端 vue
原文链接：https://blog.csdn.net/weixin_45336946/article/details/115481056
版权

做公司的后台管理系统时，需要一个省市区/县三级联动选择的功能，使用到了cascader这个组件。发现点过编辑操作之后，再点击新增时选择省市区/县时，就会看到三级联动里显示的还是之前选中的值。当时想了很多办法都不管用，还去度娘那搜索了很多解决这个问题的办法，发现太难了（那些方法都解决不了我这个问题（么用））。不过最后看到一个帖子就解决了，解决方案如下：

js中的代码

 点击取消事件

 

 

努力努力搞钱
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue2/3+element - 将级联选择器el-cascader修改为“点击文字就能选中“效果，单选/多选模式下点击label整行都可以直接选中，复选框多选模式下解决只能点击图标才能选中的问题
高级前端工程师
07-23 2716
vue2，vue3，element plus，级联选择器，el-cascader，点击文字就能选中，如何修改成点label就能选中，单选，多选，复选框，单选框，模式，饿了么组件库，无法通过点击整行直接选中的问题，点击文字行就能选择后弹框收起，选中完弹框无法收起，级联选择 点击文本选中 多选，不生效，有问题，原来的功能受影响，点击文字可选中去掉单选按钮选中后菜单收起，ElementUI Cascader 级联选择器实现点击文本选中，懒加载的数据怎么办，动态数据请求，多选模式下点击label文本选择，点击文本直
解决VUE+ElementUI中cascader级联选择器组件自动清除选中值
你就是我的世界
12-21 5162
之前在做公司的后台管理系统时，使用到了cascader这个组件。发现当你选中一个选项之后，除非手动删除，否则下次创建显示的还是之前选中的值。当时想了很多办法都不管用，最后查资料看到了一个解决方案。如下： let obj = {} obj.stopPropagation = () => {} try{ this.$...
如何清除vant van-cascader 历史选择记录 详细代码
weixin_35749545的博客
02-10 596
您可以通过设置 "clearable" 属性为 "true" 来清除 Vant 的 van-cascader 组件的历史选择记录。 以下是示例代码： <van-cascader :clearable="true" /> 希望这对您有所帮助！ ...
Element Cascader 级联选择器清除上次的点击记录
素味平生的博客
03-02 1541
问题：级联选择器点击但未选中时，再次点击触发打开时，还是上次点击的选项 需求：再次点击展开时，不展示上次展开点击的记录 解决方法： （一定要定义ref） <el-cascader ref="myCascader" size="medium" collapse-tags clearable :props="{ checkStrictly: true }" v-model="regionids" :options="regionList" /> //主要是这个 cons..
ElementUI-Cascader级联选择器不能完全清空选项框内容的问题
weixin_52674469的博客
11-02 1868
ElementUI-Cascader级联选择器不能完全清空选项框内容的问题 情况描述：   我在table的每行中嵌套了3个Cascader级联选择器，当依次选择并依次清空时，会出现显示已清空但视图上仍有已选择选项的情况，如下图： 解决办法：   在Cascader的change事件中添加this.$set(obj, index, obj[index])方法，驱动视图更新； 关于：   在vue中偶尔会出现数据更新了，但视图没有更新的情况；   如果是通过this.obj方式进行更新数据，视图一般是会跟着
解决ElementUI cascade级联选择器组件自动清除选中值的方法
不会有人真的学前端吧
08-16 2015
在做省市地级联选择器时，遇到的级联选择器重复点击问题回显上一个选择过的选项 这个问题确实挺烦人的，功能是不影响的，但是给人不是感觉特别的舒服 感谢大佬的解决方法elementUI的cascader级联选择控件使用采坑：设置默认值回显问题解决方案（亲测有效！） 解决方法： 1.这是我的cascader级联选择器代码 <el-cascader ref="cascader" style="width: 328px" .
【JavaScript源代码】elementUI实现级联选择器.docx
12-28
本文将详细介绍如何使用ElementUI库中的`el-cascader`组件来实现一个动态级联选择器，并通过具体的代码示例进行解释。 #### 二、ElementUI简介 ElementUI是一款基于Vue.js的桌面端组件库，它提供了丰富的UI组件来...
element ui 清除级联选择框选中状态（cascader）
少年一贯快马扬帆，道阻且长不转弯。要盛大，要绚烂，要哗然，要用理想的泰坦尼克，去撞现实冰川。要当烧赤壁的风，而非借箭草船，要为了一片海，就肯翻万山。
03-20 1472
<el-form-item label="客户" prop="regionId"> <div class="block"> <el-cascader ref="cascaderClassroom" v-model="optionsValue" :options="options" :props="{ value: 'id...
element-ui——element-ui级联选择器el-cascader清空所选内容
qq_43201350的博客
08-30 1166
<el-cascader v-model="List"></el-cascader> data () { return { List: [] } }, 清空方法 this.form.List =[]
vue下拉选择select option el-cascader删除重选值的问题
YY_Ylx_XX的博客
01-11 806
select当下拉值多的时候 以及inputcascader级联选择一个值后 后面我不想要了 vue 提供了一个关键字 可以帮你全部清空 这个关键字就是：clearable <el-cascader clearable filterable v-model="form.fdCategoryId" :options="fdCategoryArray"> </el-cascader> ...
bug描述：el-cascader搜索后再选中拿不到选中后的label值，getCheckedNodes()返回的还是原值，选中项高亮的也是原值
山有木兮木有枝 心悦君兮君不知
01-20 2421
问题1:el-cascader搜索后再选中拿不到选中后的label值，getCheckedNodes()返回的还是原值 elment-ui githup有一个issue解决了该问题： https://github.com/ElemeFE/element/issues/18202 问题2：el-cascader搜索后再选中，选中项高亮的也是原值 在githup issues列表中看到有大佬说可以通过改源码实现，但由于项目框架等原因，我不能去改源码，经过不断的踩坑尝试，得出以下解决方案，经测
Element el-cascader清空几种方式
qq_53120043的博客
01-10 1712
绑定到级联选择器，重新渲染来触发清除。e还有其他参数，有需要也可以改。
elementUI的级联组件el-cascader重置问题
LiangRZ
05-18 2176
// 清空地区选中节点和高亮节点 this.$nextTick(() => { this.$refs.locationCascader.$refs.panel.clearCheckedNodes() this.$refs.locationCascader.$refs.panel.activePath = [] }) 当前页使用重置，获取到ref=locationCascader的级联组件，在进行上述操作即可； // 清空地区选中节点和高亮节点 this.$nextTick(..
el-cascader 代码取消选择，手动删除某项
lx233
06-07 1696
首先，是数组splice（index，1）但是这样发现数据已经没有那一条了，视图却还保持选中状态参考这个issue ： https://github.com/ElemeFE/element/issues/18669解决：（不是下拉框，直接是级联面板，那么，panel这个获取稍有不同）this.$nextTick(()=>{ this.cascaderValue.splice(recIndex, 1); this.$refs.cascaderAddr.$refs.menu[1]
element-ui 级联选择器el-cascader踩坑
秋实的博客
06-10 2568
el-cascader 级联选择器 下拉选项选中不刷新；数据回显慢；
element-ui Cascader 级联选择器清除选中
weixin_43805439的博客
06-23 6778
<el-cascader v-model="value" :options="options" ref="cascader" </div> // 清空级联选择器选中状态 this.$refs.cascader.$refs.panel.clearCheckedNodes() // 清除高亮 this.$refs.cascader.$refs.panel.activePath = []
清空 elementui 的 Cascader选择器的默认值的一些问题
qq_42862798的博客
11-03 988
关于清空 饿了么ui的 Cascader层级选择器的默认值问题。 如图，在此界面中点击 清空 按钮，让两个选择器的内容清空。 此前我是直接利用vue的双向绑定，清空这个 绑定的数组，结果发现没用。 后来看了一下源码，发现我们只要手动触发这个方法就可以达到 组件中的 clearable 效果。 如下列代码，obj.stopPropagation = () => {}; this.$refs.treeOne.handleClear(obj);，就可。当然，还是要把你绑定的 v-mode
elementui cascader 级联选择器 清空、重置
热门推荐
qq_42765800的博客
12-26 2万+
最近测试提了个bug, 级联选择器的内容在重新操作时，值未清空… 尝试了好多方法，下面这个链接里面提到的用resetFields()重置表单的方法，没有效果，看了cascader的源码里面就没有resetFields这个方法…也尝试了去用回答这个问题的clearValue()方法, 还是没有任何效果，不知道是哪里写的不对。希望有大佬可以告知一下clearValue()这个方法该怎么用, 谢谢。 最...
elemrny获取Cascader 级联选择器的选中值
最新发布
04-09
在Element UI中，可以通过`v-model`指令来获取Cascader级联选择器的选中值。当选中值发生变化时，`v-model`绑定的数据也会相应地更新。 以下是获取Cascader级联选择器选中值的步骤： 1. 在Vue组件中，使用`v-model`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值