el-cascader 回显删除tag bug

最新推荐文章于 2025-04-01 11:30:26 发布
最新推荐文章于 2025-04-01 11:30:26 发布
阅读量765 收藏
点赞数
分类专栏： vue element 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43019510/article/details/118092533
版权

问题：

点击删除tag  删除的不是点击的tag  而是其他的 

查看源码时发现默认赋值的时候得按照这个组件的值的顺序来，即value按照options的顺序来，

解决 ：

返回的数据按id排序

elementui中el-cascader级联选择器回显解决办法（稳定有效）
m0_54883970的博客
02-26 2470
1、场景描述 这里展示的是已经获得后台传回来的需要回显数据，在级联选择器中进行回显，并且能保持稳定回显 2、解决办法 2.1、在el-cascader标签中加入 :key=“modalKey” v-model=“choose” 2.2、在data中定义 data() { //定义变量和初始值 return{ modalKey: 0, choose: [], } }, 2.3、赋值 参考以下代码 methods:{ //创建具体的方法， getInfo() { course.getCours
el-cascader多选级联动态渲染和回显
ROBIN_uuo的博客
09-18 6439
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
el-cascader回显数据删除出现错误
干脆来碗面的博客
04-28 1315
el-cascader回显开启多选,开启tag 导致的删除出现错误 具体配置 开启多选 开启tag 开启可删除 开启只显示末级 错误描述 当我根据后台数据回显后, 点击删除A 其实删除的确实B 解决方法 由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样 <el-cascader ref="cascader" style="width: 100%" v-model="cascaderData" :options="
elementUI级联选择器Cascader，删除tag存在的问题
小阮的笔记本
09-17 4739
elementUI级联选择器Cascader，删除tag存在的问题 <div class="address-choose"> <div class="card-show"> <el-button class="tags" v-for="(item,index) in cityShowList" :key="index"
Vue3 ElementPlus el-cascader 组件：开启单选模式后，点击标签文字直接选中，无需点击单选框
最新发布
qq_38814363的博客
04-01 526
Vue3 ElementPlus el-cascader 组件：开启单选模式后，点击标签文字直接选中，无需点击单选框
element el-cascader 级联选择器数据tag回显，删除tag bug
_NIXIAKF的博客
05-17 2093
效果图： 问题描述：当我根据后台数据回显后, 点击删除tagA 其实删除的是tagB 原因：由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样 分析： el-cascader 的tag 是按照index排序的 所以 如果后端返回的数据顺序和你提交时的顺序不一致就会出现 tag名称会回显出来 但是点击删除tag是删除的其他tag 通过remove-tag api 打印发现 当前id并不是当前name 的id 查看源码发现是 排序问题 但是怎么能让后端返回的顺序是你原始数据的顺序呢 ？ .
element el-cascader 回显 删除tag bug
qq_43019510的博客
06-24 2643
路径： el-cascader回显开启多选,开启tag 导致的删除出现错误具体配置开启多选 开启tag 开启可删除 开启只显示末级错误描述当我根据后台数据回显后, 点击删除A 其实删除的确实B解决方法由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样 分析： el-cascader 的tag 是按照index排序的 所以 如果后端返回的数据顺序和你提交的顺序不一致就会出现 tag名称会回显出来 但是点击删除tag是删除的其他tag 通过remove-tag api 打印...
el-cascader 多选时标签删除后，不更新数据
weixin_48805190的博客
04-11 908
解决方法：用nextTick包裹就可以了。绑定的内容还是8个们不会立马更新。
el-select 单选变多选时选项框显示出错
明月兮宝璐
04-24 840
<el-select @change="getDataPre" v-if="options.techStackSelect==4" filterable v-model="options.projectSelect" placeholder="请选择项目" > &...
【专题】（vue+element-ui）动态设置tabel列的显示与隐藏
热门推荐
鲁宽宽的博客
08-30 5万+
不得不说，百度很强大，只要搜索饿了么怎么动态设置列会得到很多答案； 1、v-show(不生效)：v-show直接绑定,得到的结果很意外，哈哈，不起作用，饿了么对v-show不感冒； 2、v-if()：此方法确实可以控制显示与隐藏；不过分情况使用： &gt;&gt;a:  element组件 el-table-column &lt;el-table-column v-if="colDa...
element-ui表格显示隐藏导致表头错乱
真皮的博客
12-02 670
<span v-if="activeName == 'five'"> <el-table-column key='22' prop="interviewResultsStatus" label="面试结果" header-align="center" align="center"> <template slot-scope="scope"> <el-tag v-if="scope.
el-cascader的使用以及报错解决
新前端小白的博客
09-02 4万+
项目中使用到了element-ui中的cascader级联选择器，组件下拉列表是动态的，根据用户选择的类型来从后台请求数据 <el-select v-model="type" @change="getCascader" placeholder="请选择类型"> <el-option v-for="item in type" :key="item...
el-cascader组件默认赋值后，删除内容可能出现的坑
Let_It_Go_One的博客
09-23 1646
需求： 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>
element el-cascader 回显 删除选项不是当前点击的
ii窝窝头的博客
03-11 2015
el-cascader回显开启多选,开启tag 导致的删除出现错误 具体配置 开启多选 开启tag 开启可删除 开启只显示末级 错误描述 当我根据后台数据回显后, 点击删除A 其实删除的确实B 解决方法 由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样， 点击删除第一个会出现删除的是最后一个 el-cascader 显示的顺序是根据下拉列表的顺序展示的，并不是后台返回的顺序 分析： el-cascader 的tag 是按照index排序的 ，没有绑定id，所以删除是根...
【Element-UI】el-cascader 组件删除异常
张景源的博客
06-25 666
使用 Element-UI 的 el-cascader 组件时，删除回显的选项，会出现排列顺序的异常。中被修复，即升级 Element-UI 到 2.15.7 之后的版本即可。
Vue2中可移除标签tag栏实现
weixin_74457498的博客
10-16 289
在现代前端开发中，Vue.js 作为一款流行的 JavaScript 框架，广泛应用于构建交互性强、用户体验优良的应用程序。在许多应用场景中，标签（tag）栏提供了一种便捷的方式来组织和展示信息。用户可以通过标签来快速识别内容，增强界面的可用性。然而，随着用户需求的变化，标签的管理变得越来越重要，特别是在需要动态添加和移除标签的情况下。实现可移除标签的功能，不仅能提高用户的操作灵活性，还能提升应用的整体体验。本文将介绍如何在 Vue 2 中实现可移除标签栏的功能，通过简单的示例和步骤，帮助开发者快速上手。
vue+element-ui select多选框赋值之后触发change事件和remove-tag事件
蜡笔小心
03-01 2万+
由于业务需求，需要在页面上使用element-ui的select多选框的方法，当select为空时，change事件和remove-tag事件可以完美呈现，但是当select中赋值后，change事件和remove-tag事件可以触发，但是页面上没有反应。 &lt;el-select v-model="debt.borrowers" filterable multiple placeholde...
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
风间琉璃c
03-24 3万+
el-cascader 动态加载选项 以及编辑时数据回显问题
elementUi——select下拉多选后触发表格更改——js技能提升
yehaocheng520的博客
12-15 5154
最近在做后台管理系统，遇到一个需求，就是根据下拉选择框多选，选中的内容在表格中展示，每一行都可以添加多个分类标签。 效果图如上： 分析需求： 1.select组件多选功能实现 <el-select v-model="checks" multiple placeholder="请选择物料分类" @change="checkChange" size="mini" @remove-tag="removeTag"> <el-option v-for="(cate) in productCa
el-cascader回显
05-31
el-cascader 组件的回显可以通过 v-model 双向绑定实现。在初始化 el-cascader 组件时，可以将需要回显的数据通过 v-model 绑定到 el-cascader 上，这样选择后 el-cascader 组件会自动将选择的数据赋值给绑定的数据。 例如，如果需要回显 id 为 [1, 2, 3] 的数据，可以这样写： ```html <el-cascader v-model="selectedOptions" :options="options" :props="props" ></el-cascader> ``` ```javascript data() { return { selectedOptions: [1, 2, 3], options: [], // 省略 options 数据 props: { // 配置 el-cascader 的属性 value: 'id', label: 'name', children: 'children' } } } ``` 这样选择后，selectedOptions 中就会自动更新为选择的数据，也就是 [1, 2, 3]。如果需要再次回显，只需要将需要回显的数据通过 v-model 绑定到 el-cascader 上即可。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值