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

最新推荐文章于 2024-04-01 14:41:48 发布
最新推荐文章于 2024-04-01 14:41:48 发布
阅读量3.2k 收藏 10
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45336946/article/details/115481056
版权

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

思路：可以采用 重新渲染 的方式解决这个问题。
1、首先先在cascader中绑定key里
在这里插入图片描述
2、其次在data中定义key中绑定的的值
在这里插入图片描述
3、最后把重新渲染的代码写到你要用到的那个地方
在这里插入图片描述
查看我项目中示例代码：
1、html中代码
在这里插入图片描述
2、js
在这里插入图片描述

今昔在
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
element-ui Cascader 级联选择器清除选中
Lingling_12356的博客
11-27 1090
<el-col :span="24"> <el-form-item label="教室地址" prop="regionCode"> <el-cascader style="width: 100%;" class="input-width" ref="cascaderClassroom" expand-
country-data:基于elementUI的Cascader 级联选择器的城市数据
05-14
在ElementUI中，创建一个Cascader组件需要在HTML模板中引入该组件，并设置相应的属性。例如： ```html <el-cascader :options="options"></el-cascader> ``` 这里的`options`属性是一个数组，包含每一级的数据，每...
【ElementUI】Cascader 级联选择器点击选完收起
v5666666的博客
08-10 2053
我们希望选择后收起下拉 官方是没有这个 只需要监听里面的 v-model=“id” 的值 <el-cascader :options="options" v-model="areaId" ref="refSelect"//记得！！！ :show-all-levels="false" change-on-select @change="handl
Elementui cascader组件如何取消选中 clearCheckedNodes
onlylele的博客
10-12 5289
问题 在form表单中使用cascader，某些需求下会将整个表单disabled，如果此时点击了cascader，它会disabled，但弹出框不会消失。 查看文档 给cascader设置上ref <el-cascader v-model.trim ="cId" ref="cascader" :options="category" @change="handleChange"></el-cascader> 调用 // 清空选中的节点 this.$ref
elementUi中的级联选择器的清空操作
yinge0508的博客
03-04 5037
<el-cascader collapse-tags style="width: 100%" v-model="subjectValue" :options="subject" :props="{ multiple: isMultiple }" ref="cascader" clearable ></el-cascader> // 清空已经选中的数据方法 clear() { .
element的Cascader 级联选择器中怎么去掉节点的选中状态
曾小超的博客
01-20 1314
bug是clearable清空没有效果，还是显示之前选中的状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
cascader遇到的坑（点击选中时，弹框不关闭；选择的内容回显是radio不显示选中状态；要求点击文字也可选择；）
菜同学的博客
05-13 4299
测试提了个bug，选择目录后选择框不自动关闭 点击了一下确实如此 这里我使用的是 elementUi 的 cascader 具体代码如下： <el-cascader ref="catalogue" v-model="exportForm.directIds" :options="catalogueList" :props="{value: 'id', label: 'directoryName', children: 'child...
element-ui 级联选择器el-cascader踩坑
秋实的博客
06-10 2471
el-cascader 级联选择器 下拉选项选中不刷新；数据回显慢；
Element Cascader清空几种方式
玲曦的博客
08-17 2430
Cascader无法清空？试试这几种方式。
Element Cascader 级联选择器的使用示例
10-15
Element Cascader 是一个在前端开发中常用的组件，尤其在基于 Vue.js 的项目中，它被用于实现级联选择的功能。这个组件允许用户从一组层级结构的数据中进行选择，例如省份-城市-区县的选择，或者组织架构的部门选择...
详解关于element级联选择器数据回显问题
10-17
在数据部分，`depShowType` 定义了级联选择器中选项的结构，`SelectdeptId` 用于存储选中的值。在编辑操作时，`handleEdit` 方法被调用，接收待编辑的数据，并试图将 `deptId` 值映射回级联选择器中。这里的关键在于...
使用于iview 中 Cascader 级联选择的 省、市、县数据
09-28
使用于iview 中 Cascader 级联选择的 省、市、县数据 ，在项目中亲自测试过没有任何问题，使用如果有问题请联系
elementui级联选择器多选的删除小bug
a2667486939的博客
09-27 1161
开发中使用elementui的级联选择器遇到的一个小问题，记录一下 在使用elementui的级联选择器进行多选时，折叠的样式点击“x”按钮，改变数据时，获取节点会延迟， 代码如下 <el-cascader ref="test" :options="options" :props="props" @change="change" collapse-tags clearable></el-cascader> data() { ret
elementUI Cascader 级联清空选中节点
疑问 搜索 动手 解决 记录
02-04 2584
给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){
el-cascader 级联选择器清空初始化
keke11211的博客
09-28 6237
需求： 级联选择器在清空了输入框之后，需要同时清空弹框里面的选中样式、高亮、以及回归初始化状态只展开一级菜单：【图1变 图2】 解决办法： 判断输入框为空值之后做以下操作恢复到初始化状态： this.$refs.myCascader.$refs.panel.checkedValue=[];//清空选中值 this.$refs.myCascader.$refs.panel.clearCheckedNodes();/...
element Cascader 级联选择器 回显以及清空
曳猫的博客
09-17 1468
element Cascader 级联选择器 回显以及清空。
解决Ant-design of vue 级联选择栏数据清除问题
qq_46074694的博客
06-17 770
解决Ant-design of vue 级联选择栏数据清除问题
Vue使用Element的级联选择器Cascader清空事件
coldriversnow的专栏
04-01 1080
3、如何在点击级联选择器本身的那个×后，调用某个方法（或进行某个步骤）在级联选择器@change绑定的方法中设置监听，即。这个就是监听有没有点击级联选择器的清空那个图标。即可，这个clear是清空按钮绑定的方法。2、在要清空的函数方法中。
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
最新发布
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
elemrny获取Cascader 级联选择器的选中值
04-09
在Element UI中，可以通过`v-model`指令来获取Cascader级联选择器的选中值。当选中值发生变化时，`v-model`绑定的数据也会相应地更新。 以下是获取Cascader级联选择器选中值的步骤： 1. 在Vue组件中，使用`v-model`指令将Cascader组件与一个数据属性进行双向绑定，例如： ```html <el-cascader v-model="selectedValues" :options="options"></el-cascader> ``` 其中，`selectedValues`是一个数组类型的数据属性，用于存储选中的值。 2. 在Vue组件的`data`选项中定义`selectedValues`数组，并初始化为空数组： ```javascript data() { return { selectedValues: [] }; } ``` 3. 当用户选择Cascader的选项时，`selectedValues`数组会自动更新为选中的值。你可以通过访问`selectedValues`数组来获取选中的值。 例如，你可以在Vue组件的方法中打印出选中的值： ```javascript methods: { printSelectedValues() { console.log(this.selectedValues); } } ``` 这样，当用户选择Cascader的选项时，你可以调用`printSelectedValues`方法来获取选中的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值