el-cascader回显数据删除出现错误

最新推荐文章于 2025-04-11 15:32:40 发布
最新推荐文章于 2025-04-11 15:32:40 发布
阅读量1.3k 收藏
点赞数 2
分类专栏： vue elementui 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43970491/article/details/116239616
版权
本文探讨了在使用Element UI的Cascader组件时，如何处理开启多选、tag和删除功能时遇到的回显问题，特别指出当回显顺序与数据源不一致时导致的选择误删。通过实例配置和错误分析，提供了解决方案。

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

el-cascader回显开启多选,开启tag 导致的删除出现错误
具体配置
开启多选 开启tag 开启可删除 开启只显示末级
错误描述
当我根据后台数据回显后, 点击删除A 其实删除的确实B
解决方法
由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样

      <el-cascader
        ref="cascader"
        style="width: 100%"
        v-model="cascaderData"
        :options="regimeTree"
        :props="props"
        clearable
        :show-all-levels="false"
      ></el-cascader>

选择后发送给后台的数据顺序

在这里插入图片描述

后台返回数据顺序

在这里插入图片描述

构造路径后的数组顺序
在这里插入图片描述

el-cascader报错解决，TypeError: Cannot read property ‘level‘ of null TypeError
xiaoqingqing的博客
11-20 2169
一、场景描述：项目中使用到了elementUI的el-cascader组件，先一次获取所有数据，根据不同类型，级联选择器加载对应数据。 <!-- 单选框 --> <el-radio-group v-model="regionType"> <el-radio v-for="item in regionTypes" :label="item.label" :key="item.label">{{item.text}}&lt
el-select中多选回显数据后没法重新选择和更改
热门推荐
疑问 搜索 动手 解决 记录
03-02 1万+
<el-select v-model="list" filterable multiple @change="$forceUpdate()"></el-select> 标签里加个@change="$forceUpdate()" 就好了
【Element-UI】el-cascader 组件删除异常
张景源的博客
06-25 667
使用 Element-UI 的 el-cascader 组件时，删除回显的选项，会出现排列顺序的异常。中被修复，即升级 Element-UI 到 2.15.7 之后的版本即可。
el-cascader 级联选择器过滤数据与回显
最新发布
weixin_47211345的博客
04-11 349
级联选择器一般用于数据较多的情况，多维数组对数据进行分类、多选。本文示例，减少数据库数据存储量。
el-cascader 回显删除tag bug
qq_43019510的博客
06-21 769
问题： 点击删除tag 删除的不是点击的tag 而是其他的 查看源码时发现默认赋值的时候得按照这个组件的值的顺序来，即value按照options的顺序来， 解决 ： 返回的数据按id排序
ElementUI组件Cascader数据显示删除错位
彭世瑜的博客
07-25 1848
ElementUI组件Cascader显示的数据和我删除的数据不一致 解决办法： 将回显数据的顺序和配置数据顺序以相同的方式排序 比如: // 配置顺序 [ label: "分类1", value: '1', children: [ { label: "分类1-1", value: '1-1', }, { label: "分类1-2", va
element el-cascader 回显 删除选项不是当前点击的
ii窝窝头的博客
03-11 2017
el-cascader回显开启多选,开启tag 导致的删除出现错误 具体配置 开启多选 开启tag 开启可删除 开启只显示末级 错误描述 当我根据后台数据回显后, 点击删除A 其实删除的确实B 解决方法 由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样， 点击删除第一个会出现删除的是最后一个 el-cascader 显示的顺序是根据下拉列表的顺序展示的，并不是后台返回的顺序 分析： el-cascader 的tag 是按照index排序的 ，没有绑定id，所以删除是根...
el-cascader 选中不回填
03-25
用户发现在删除v-model后，选择状态可以正确回显。这可能是因为在某些情况下，双向绑定会导致组件状态更新出现问题。因此，需要确认是否在组件中正确使用了v-model，或者是否存在数据响应式的问题，比如数组或对象...
vue框架下 element 动态加载级联选择器主动清空内容
aj951225的博客
06-19 3704
做公司项目的时候需要用到级联选择器，获取数据后发现无法主动清空内容，主要尝试了网上几种方法，如主动触发clearable、还有什么鬼暴力清空方法和以下方法，均以失败告终。 let obj = {} obj.stopPropagation = () => {} try{ this.$refs.cascader.clearValue(obj) }catch(err){ this.$refs.cascader.handleClear(obj) } 后来在公司大佬的帮助下（小声点说，其实方法
整理Vue项目开发过程中遇到的常见问题2
weixin_41697323的博客
05-08 1538
7style 加scoped问题不起作用，需要在选择器前面增加deep深度选择器才能选中元素
谷粒商城基础篇
apple_52138126的博客
03-06 2931
大哥的笔记
element el-cascader 回显 删除tag bug
qq_43019510的博客
06-24 2648
路径： el-cascader回显开启多选,开启tag 导致的删除出现错误具体配置开启多选 开启tag 开启可删除 开启只显示末级错误描述当我根据后台数据回显后, 点击删除A 其实删除的确实B解决方法由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样 分析： el-cascader 的tag 是按照index排序的 所以 如果后端返回的数据顺序和你提交的顺序不一致就会出现 tag名称会回显出来 但是点击删除tag是删除的其他tag 通过remove-tag api 打印...
element el-cascader 级联选择器数据tag回显，删除tag bug
_NIXIAKF的博客
05-17 2097
效果图： 问题描述：当我根据后台数据回显后, 点击删除tagA 其实删除的是tagB 原因：由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样 分析： el-cascader 的tag 是按照index排序的 所以 如果后端返回的数据顺序和你提交时的顺序不一致就会出现 tag名称会回显出来 但是点击删除tag是删除的其他tag 通过remove-tag api 打印发现 当前id并不是当前name 的id 查看源码发现是 排序问题 但是怎么能让后端返回的顺序是你原始数据的顺序呢 ？ .
elementui的el-cascader级联选择器多选删除不了标签
kdjfh的博客
01-06 1371
elementui的el-cascader级联选择器多选删除不了标签
el-cascader组件默认赋值后，删除内容可能出现的坑
Let_It_Go_One的博客
09-23 1648
需求： A页面跳转至B页面，B页面需要展示赋值了的el-cascader组件。 图片如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body>
el-cascader 多选时标签删除后，不更新数据
weixin_48805190的博客
04-11 914
解决方法：用nextTick包裹就可以了。绑定的内容还是8个们不会立马更新。
el-cascader编辑页面清空按钮需要点击多次才能清空数据，并且报错rror in callback for watcher “options“，null (reading ‘level‘)
MM_20211102的博客
04-22 1141
最近手头上有个需求，就是建表时建表部门必须选该部门对应人员，只有选择到的人员才有权利操控这个表，部门和人员都可多选；按照原型图，决定使用el-cascader级联选择器，但看似简单的两个多选级联框，能碰到的问题都被我遇到了，接来下详细阐述，希望对大家有帮助； 1，首先，是报错问题，看下图： 导致报错的原因有百度，大部分都是说给cascader加key值，然后动态改变cascader的值，cascader++操作，但至于具体在哪cascader++操作，众说纷纭，也没有具体讲清楚，接...
el-cascader的使用以及报错解决
qq_44552416的博客
07-04 2387
问题描述： 场景：有的类型没有数据，这时cascader的options是[ ]，下拉框是空的。如果选择了一个类型，根据类型获取了cascader的数据，在cascader中选择了一条数据，再更换类型，没有这条数据了就会报错 这是在使用element ui中的cascader出现的报错 原因暂时不清楚，个人理解可能是因为数据源没得到及时更新，而vue是数据驱动的，所以我加了监听器，并且给cascader绑定了一个key，这样只要监听到数据源发生变化，key 就变化，就重新渲染解决办法1： 如果没有数据就将
el-cascader 加上filterable 和clearable 后出现2个清除icon解决方案
Sindy的博客
07-21 892
el-cascader v-model="citys" @change="handleChange" :options="cityList" collapse-tags clearable filterable placeholder="登录城市" class="login-city" ></el-cascader>
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值