＜问题记录＞ ElementUI的级联选择器，使用clearable，无法正常清除

最新推荐文章于 2023-08-01 14:47:42 发布
最新推荐文章于 2023-08-01 14:47:42 发布
阅读量3k 收藏 1
点赞数
分类专栏： 踩过的坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46337886/article/details/114906439
版权

使用clearable进行清除后，发现v-model的值还保留在第二级，不能继续在进行查询

在这里插入图片描述

上图，在点击清除按钮后，发现还保留在北京市。

我的解决办法是在axios向后台发送数据的时候进行一个判断，如果选择的数组长度等于3那就获取(第三个值)最后的值，否则就为空字符

在这里插入图片描述

后端为了查出级联选择器的数据单独创建了个查询方法

以下是DAL层的一部分代码
在这里插入图片描述

深阿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue+ElementUI 中级联选择器Bug问题的解决
11-19
最近在项目中需要用到级联这么个控件，所以便去element上找了个，发现了个问题，在这里跟大家分享下，介于公司项目的隐私性，所以一些文字便给大家打上马赛克了，敬请谅解~ 不多说废话，直接上问题： ElemenUI的级联是通过子级字段递归进行显示的，但是假如后端老铁也用了递归写的数据，而递归到最后一个数据集便出现了问题，会出现光有字段，但是却没有数据这么个情况在这里插入图片描述 这时候就出现了问题： 最后一级会多出来一个级联，这种体验便造成了很不好的感觉。 解决办法： 将获取这些级联的数据作为参数传到这个递归函数当中，进行从组，假如递归到[ ] 转换为undefined(‘不识别’)，这
详解关于element级联选择器数据回显问题
12-29
element级联选择器数据回显问题 对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。 表单部分代码： <el label=部门名称： prop=deptId> <el placeholder=请选择部门 props=depShowType options=...
整理element UI的常见问题
lztry_的博客
09-02 1024
常见问题form 下面只有一个 input 时回车键刷新页面表格固定列最后一行显示不全气泡确认框文档里的confirm事件不生效输入框用正则限制但绑定值未更新去除type="number"输入框聚焦时的上下箭头只校验表单其中一个字段弹窗重新打开时表单上次的校验信息未清除表头与内容错位表单多级数据结构校验问题表格套input动态验证表格跨分页多选根据条件高亮行并去除默认hover颜色表单不想显示label但又想显示必填星号怎么办table 内嵌 input 调用 focus 方法无效表格内容超出省略el-tr
VUE Element-ui 级联选择器自定义value label属性 与 出现空白选项的bug解决方法
辰小白
03-02 6128
一、自定义value label属性 html代码 <el-cascader v-model="value" clearable :options="labelPool" :props="setKesLabel" ></el-cascader> js代码 export default { data(){...
ElementUI-Cascader级联选择器不能完全清空选项框内容的问题
weixin_52674469的博客
11-02 1757
ElementUI-Cascader级联选择器不能完全清空选项框内容的问题 情况描述：   我在table的每行中嵌套了3个Cascader级联选择器，当依次选择并依次清空时，会出现显示已清空但视图上仍有已选择选项的情况，如下图： 解决办法：   在Cascader的change事件中添加this.$set(obj, index, obj[index])方法，驱动视图更新； 关于：   在vue中偶尔会出现数据更新了，但视图没有更新的情况；   如果是通过this.obj方式进行更新数据，视图一般是会跟着
iview input组件clearable清空属性无法清空双向绑定值的原因解决
lyz246859的博客
06-30 937
原来我绑定的参数的中文名称，但是搜索使用的是参数的具体代码值，所有点击清除按钮只是清掉了名称而已，具体的参数值是没有清掉的，所有导致搜索还是一样的，这是我们大家都很容易忽略的错误，希望写出来让大家都避免这个错误。最近在使用iview新版本 input组件时，刚开始发现使用v-modal绑定的值，在点击clearable清除input框内容时，再次搜索发现参数还是没有被清掉。
Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应
zhuzicc的博客
08-26 5355
文章目录一、问题描述二、问题分析三、解决方法1.方法一 vm.$set2.方法二 $forceUpdate() 一、问题描述 项目上使用Vue+elementUI-select多选下拉框做数据编辑时，数据回显成功，但是无法对回显成功数据进行操作。 代码片段： <template> <el-form-item label="标签：" prop="values"> <el-select v-model="form.values"
element-ui的下拉选择框选中内容无效果，删除无效果
Fray_Zyt的博客
03-11 4366
原理：其实都有生效的，只是页面没有刷新，展现不出来，我们则可通过强制刷新即可，具体代码如下： <el-select style="width: 95px;" v-model="xxx.xxxx" clearable placeholder="请选择" @change="handleChange"> <el-option v-for="item in list" :key="item.index" :label="item.name" :value="item.name">
ElementUI Select单选切换多选无法清除历史数据的解决方案
sinat_33255495的博客
07-13 3220
需求场景：有一个tab切换，每一个tab下都有一个 下拉框，只是一个是多选一个是单选，问题是当切换tab标签的时候，下拉框的样式不会被清空。解决方案： 简单到吐血，却困了我好几天。只需要在 el-select 上加一个 key 就可以完美解决。我想了一下，出现这个问题的原因就是组件没有重新渲染，加上 key 可以定位渲染，仅此而已。...
【JavaScript源代码】elementUI实现级联选择器.docx
12-28
　本文实例为大家分享了elementUI实现级联选择器的具体代码，供大家参考，具体内容如下　1、从后端调用接口，传递数据到前端　2、使用VUE代码显示级联选项　<el-cascader　:disabled="isDisabled"　:props=...
ElementUI Select单选切换多选无法清除历史数据
刻痕
12-02 4953
element-ui Select单选切换多选，单选的选项还在，清空value也清理不掉处理方案： 直接上代码： <template> <div> <el-select v-model="value" :multiple="multipleType" filterable allow-create default-first-option placeholder="请选择文章标签"
elementui的el-cascader级联选择器多选删除不了标签
kdjfh的博客
01-06 1172
elementui的el-cascader级联选择器多选删除不了标签
elementui中input输入框clearable属性无效的解决方法
热门推荐
weixin_42717735的博客
10-23 2万+
elementui中input输入框clearable属性无效的解决方法 如果你按照官网文档加上clearable属性没有用的话，那么可能是版本不对或者没引入,可以使用这条命令 npm update ...
清除el-cascader中的数据
qq_42586147的博客
07-06 3214
清空el-cascader
elementui 一个选择框根据另一个选择框所选内容的改变而改变，但是选择后原数据没有清除的问题
在车上在路上的博客
09-23 5231
先说问题。 我们项目中时常会写一些选项之间相互联系的内容，如下 根据上部用户属性的选择值不同，下面的显示内容也会根据选择值来变化，这里使用v-if来判断下面要做什么样的显示就不多再赘述。 但是由于这里可能会形成多个这样的小框，如下 所以这里要对数据进行循环操作来展示，所以form在绑定时不能简单使用一个对象来绑定了，而是使用了一个数组来不断往里添加或者删除来实现。数据结构： arr: [ { id: '', province: [],
element select 多选内容过多内容没有去除问题
qq_40896095的博客
06-09 624
Element Select 多选内容过多DOM更新问题
el-select下拉框查询，clearable叉掉后数据数据消失，下拉框数据为空的问题（已解决）
最新发布
evennight的博客
08-01 1474
源代码如上，再clearable后数据就会删除掉刚刚显示的也就是v-model绑定的数据，原因是在我初始化的时候给data 赋值了listData[0]，而且是直接用等号赋值，也就意味着，el-select将v-model的数据清空后也会，将同地址引用的liatData[0]的数据清空自然就不会查到数据，改为data={…listData[0]}只赋值数据就好了。
element Cascader 级联选择器 回显以及清空
曳猫的博客
09-17 1454
element Cascader 级联选择器 回显以及清空。
element plus el-input-number 清空时无法触发change事件
supming1的专栏
04-23 991
element plus el-input-number 清空时无法触发change事件
elementui级联选择器使用
07-27
以下是使用 Element UI 级联选择器的步骤： 1. 首先，确保你已经安装并引入了 Element UI 组件库。 2. 在需要使用级联选择器的页面中，引入 Cascader 组件： ```javascript import { Cascader } from 'element-ui...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值