element el-cascader 回显 删除tag bug

最新推荐文章于 2024-06-28 16:00:35 发布
最新推荐文章于 2024-06-28 16:00:35 发布
阅读量2.4k 收藏
点赞数 3
分类专栏： vue element 文章标签： elementui bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43019510/article/details/118186047
版权

路径：

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

分析：

     el-cascader 的tag  是按照index排序的  所以 如果后端返回的数据顺序和你提交的顺序不一致就会出现   tag名称会回显出来  但是点击删除tag是删除的其他tag   通过remove-tag   api 打印发现  当前id并不是当前name 的id    查看源码发现是  排序问题  但是怎么能让后端返回的顺序是你原始数据的顺序呢 ？

  排坑：

   查看官网例子发现数据是从小到大  ok  把后返返回数据排序sort   结果发现还是不对 排查数据

我草  后端数据 子父级id 居然没有关系！导致有些能tag能对应删除  有些不能   他妈的  

既然我自己选择出来的tag 没问题  就说明  选出来的数据是有排序的  所以曲线救国  利用api在后端返回数据时 将选中数据赋值给绑定的值  就解决了排序问题

蚂蚁驰江河
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element级联选择器根据id值回显
d583531572的博客
06-09 3272
element级联选择器根据id值回显父亲节点 //回显(多级) changeDetSelect(key, treeData) { let arr = []; // 在递归时操作的数组 let returnArr = []; // 存放结果的数组 let depth = 0; // 定义全局层级 // 定义递归函数 function childrenEach(childrenData, depthN) {
使用element中el-cascader级联选择器：实现省市区街道筛选、动态懒加载以及回显
12-22
全国省市区街道的json数据
【Element-UI】el-cascader 组件删除异常
张景源的博客
06-25 550
使用 Element-UI 的 el-cascader 组件时，删除回显的选项，会出现排列顺序的异常。中被修复，即升级 Element-UI 到 2.15.7 之后的版本即可。
el-cascader多选/单选数据不回显
最新发布
EIERICA的博客
06-28 389
但是不适用于我的项目上，在一点一点排查之后发现是切换单双选导致的数据不回显。这一行导致，所以就直接写两个组件用。
elementUI级联选择器Cascader，删除tag存在的问题
小阮的笔记本
09-17 4432
elementUI级联选择器Cascader，删除tag存在的问题 <div class="address-choose"> <div class="card-show"> <el-button class="tags" v-for="(item,index) in cityShowList" :key="index"
element el-cascader 级联选择器数据tag回显，删除tag bug
_NIXIAKF的博客
05-17 1912
效果图： 问题描述：当我根据后台数据回显后, 点击删除tagA 其实删除的是tagB 原因：由于顺序错误的问题导致的, 回显顺序和数据源顺序不一样 分析： el-cascader 的tag 是按照index排序的 所以 如果后端返回的数据顺序和你提交时的顺序不一致就会出现 tag名称会回显出来 但是点击删除tag是删除的其他tag 通过remove-tag api 打印发现 当前id并不是当前name 的id 查看源码发现是 排序问题 但是怎么能让后端返回的顺序是你原始数据的顺序呢 ？ .
element中el-select中的remove-tag移除标签事件携带的参数
weixin_61273407的博客
04-18 8457
结构层 :remove-tag事件方法, 不需要携带参数 <el-select v-model="valueTags" filterable placeholder="请选择标签" multiple @remove-tag="removeTag" > <el-option v-for="item in simTagList" :key="item.id" :label="item.title" :value="item.id"..
el-cascader 多选时标签删除后，不更新数据
weixin_48805190的博客
04-11 542
解决方法：用nextTick包裹就可以了。绑定的内容还是8个们不会立马更新。
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @expand-change=censusLandChange :props={ va
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时超出元素区域，以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...
Element中的Cascader（级联列表）动态加载省\市\区数据的方法
01-21
element中的cascader其实是有动态加载次级选项的方法。 方法的原理是利用址（引用）传递，动态修改:options。 var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: tom} ...
解决element ui select下拉框不回显数据问题的解决
10-17
解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...
解决el-select下拉框多选在赋完值之后，不能对tag和已选中的值取消掉
weixin_46212682的博客
02-18 1432
解决el-select下拉框多选在赋完值之后，不能对tag和已选中的值取消掉
Element-ui Cascader 级联选择器回显数据
大漠孤烟
02-04 2252
回显的方式 两种情况： 1.直接使用JSON回显（针对于每个人看到的菜单一致，数据库直接保存数据JSON串，直接回显） 2.保存最后一位，递归回显 （针对于每个人看到的菜单不一样，有的人能看到两级，有的人能看到三级，只保存最后一位，然后前端做一下处理） 以下代码中的变量含义： resultJson：要回显的JSON串 navList：级联JSON数据（菜单父子结构数据） navIds：数据库保存的 2，3，4（需要回显的最后一位ID数组） 直接使用JSON回显 ，数据库保存数组JSON串，回显
c 清除 html标签,13.4. 去除HTML的标签tag:htmlRemoveTag
weixin_39844549的博客
06-20 193
13.4.去除HTML的标签tag:htmlRemoveTag/** [Function]* remove html tag, retain html content* [Input]* html, with tag** [Output]* pure content, no html tag** [Note]*/public string htmlRemoveTag(string html){s...
el-cascader使用，多选禁用
ndkfa的博客
11-27 1082
【代码】el-cascader使用，多选禁用。
directives实现el-select部分tag不可关闭
dabaoai123123的博客
07-30 497
无
elementui的el-cascader级联选择器多选删除不了标签
kdjfh的博客
01-06 1223
elementui的el-cascader级联选择器多选删除不了标签
element-ui el－select多选默认值不允许编辑删除
lning8808的博客
12-10 6666
自己琢磨半天没解决，看到一篇大佬的文章顿时茅塞顿开，记录一下加深印象 原文路径：https://blog.csdn.net/qq_36356218/article/details/102605332 注意：v-defaultSelect这个是引用的大佬写的main.js或组件内部的Vue.directive定义的方法，第一个值“groupid.value”是select的v-model值，第二个值...
el-cascader回显不了
09-01
您好！对于el-cascader回显的问题，可能有几个原因导致无法显示。 首先，请确保您已正确引入了element-ui的el-cascader组件，并且在Vue组件中正确地注册了el-cascader。 其次，确保您传递给el-cascader的数据格式正确。el-cascader接受一个数组作为数据源，每个选项应该是一个对象，包含label和value属性。 例如： ``` data() { return { options: [ { value: 'option1', label: 'Option 1', children: [ { value: 'option1-1', label: 'Option 1-1' }, { value: 'option1-2', label: 'Option 1-2' } ] }, { value: 'option2', label: 'Option 2', children: [ { value: 'option2-1', label: 'Option 2-1' }, { value: 'option2-2', label: 'Option 2-2' } ] } ] }; } ``` 最后，请确保在el-cascader组件上设置了v-model指令，将选中的值绑定到Vue实例的数据中。例如： ``` <el-cascader v-model="selectedOptions" :options="options"></el-cascader> ``` 这样就可以将选中的值保存在`selectedOptions`中。 如果您仍然遇到问题，建议查看浏览器控制台是否有任何错误信息，以帮助进一步排查问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值