element-cascade回显问题

最新推荐文章于 2024-07-16 10:46:09 发布

强壮的代码

最新推荐文章于 2024-07-16 10:46:09 发布

阅读量460

点赞数 1

文章标签： elementui 前端

本文链接：https://blog.csdn.net/qq_36647441/article/details/123735701

版权

本文主要探讨了在使用Element UI的级联选择器（cascade）时遇到的数据回显问题。作者通过将传入数据拆分为数组并遍历以匹配级联选择器的数据结构，实现了正确显示数据。然而，当数据变更时，级联选择器的列表中仍会保留旧数据。为解决这个问题，作者采用了v-if控制组件重新生成。欢迎有经验的开发者提供更好的优化方案。

摘要由CSDN通过智能技术生成

怕描述不清楚，就先上大图吧，留个记录

思路是：将传过来的数据通过 > 拆分成数组一二三级，然后将cascade的数据根据拆分后的数组一二三级进行遍历，一级对应数组一层，二级对应数组一层的list，三级对应数组二层的list，取到对应ID 然后push进 cascade的v-model 数组就可以得到这样的效果

但是遇到个bug 有时候传过来的数据变更会保留在cascade的数据列表里，所以通过v-if的形式控制element-cascade组件重新生成，如果还有更好的办法欢迎看到这篇文章的有缘人留言

最后感觉大佬帮我改了一下大佬,这就是大佬帮我改的代码,原代码忒丑怕有缘人看吐了就补贴了

if(vm.subParentUpadte.length){
                    // 将其他页面传过来的字符串转换成数组并去掉空格 eg：自学考试 > 教育
                   let subNameArr = vm.subName.split('>').filter(i=>!!i.trim()).map(i=>i.trim())
                   let first,second,third
                
                   subNameArr.forEach((item, index)=>{  
                        if(index===0){
                            first = vm.subParentUp