先看图,你是否也遇到这个需求?

如果你正在焦头烂额,无脑抓瞎,那么你来对地方了,因为我将给你一个简单易懂的实现方案。

我也在网上翻了无数页答案,也照着别人的代码和思路尝试了,事实上并不能解决我这个棘手的问题。

级联下拉选多选、懒加载、数据回显,尽管 ElementUI 已经很贴心,文档写的也很好。

前两个很容易就可以实现,可是唯独数据回显被遗忘了,似乎忘记了数据回显应该是级联选择器必备的功能,很遗憾,需要我们自己去实现。

根据文档我们可以很容易配置一个级联组件,并且级联选择器的值应该是一个二维数组。

<el-cascaderv-model="updateForm.category"separator="-":props="cascaderProps"
></el-cascader>

然后配置cascaderProps数据如下

cascaderProps: {multiple: true,checkStrictly: true,lazy: true,lazyLoad: this.lazyLoad,value: "id",label: "name",leaf: "leaf"
}

如果照做了,那么恭喜你,已经实现了一半的需求了,不过你很快就会发现,编辑的时候级联选择器的数据是空的。

不过组件给我们提供了一个参数options,如果级联选择的模板是完整的,那就可以很容易回显这个数组,可是现在的选择模板是懒加载的,那么就需要根据updateForm.category 拼出一个备选模板就可以了。

问题的关键就在于options模板如何生成,这个问题困恼了我好几天,最后也是灵感加成,十分钟就撸完了。

先看一段代码,然后分析下思路。

//编辑类目async updateBtnClick(node, data) {this.node = node.parent;
this.updateForm.id = data.id;
this.updateForm.name = data.name;this.updateForm.level = ["一级类目", "二级类目", "三级类目", "四级类目"][node.level - 1];this.updateForm.parent_name = node.level > 1 ? node.parent.data.name : "";this.updateForm.category = data.category || [];// this.updateForm.category_name = data.category_name || [];this.category_array = Array.from(new Set(this.updateForm.category.join(",").split(",")));this.initOptions();},//初始化categoryasync initOptions() {let req = {parent_id: 0,category_id: this.node.id || 0};let res = await this.$api.getFrontcategoryTemp(req);if (res.error_code == 0 && res.data && res.data.list) {this.cascaderOptions = await this.loadOptions(res.data.list || []);this.updateForm.visible = true;}},//递归加载子类目async loadOptions(category) {let array = [];for (let i = 0; i < category.length; i++) {if (category[i].child_count > 0 &&this.category_array.includes(category[i].id + "")) {let req = {parent_id: category[i].id,category_id: this.node.id || 0};let res = await this.$api.getFrontcategoryTemp(req);if (res.error_code == 0 && res.data && res.data.list) {category[i].children = await this.loadOptions(res.data.list);}}array.push(category[i]);}return array;}

解决方案的思路:

1、将需要回显的数据二维数组平铺成一维数组并去重。

2、初始化备选项的一级下拉选。

3、遍历一级下拉选判断是否需要加载子类目。

4、递归遍历下拉选。

这个方案确实也是非常容易理解的,与我们手动点击加载子集类似。

最终的组件配置如下:

<el-cascaderv-model="updateForm.category"separator="-":options="cascaderOptions":props="cascaderProps"
></el-cascader>

好了,希望你能搜到我这个方案,最好尽快搜到。

ElementUI 版本2.13.2。

----

再来更新一点,算是优化吧。

针对第一步

1、将需要回显的数据二维数组平铺成一维数组并去重。

可以做点优化,二维数组

[[1,10,101],[1,11,115],[2,20,201,2014]]
//可以去掉最后一位
[[1,10],[1,11],[2,20,201]]
//这样可以减少很多请求

减少不必要的资源开销。

-------------再来更新一点-------------

因为搜索的问题,所以重新封装了组件,然后重新缕了一下思路,实现了更优雅的,懒加载回显和搜索,以及搜索回显的问题。

UI如下

准备打个包,方便以后需要的人吧。

动态加载 回显_ElementUI cascader级联动态加载及回显相关推荐

  1. cascader 动态加载 回显_ElementUI cascader级联动态加载回显和搜索看这个就够了

    这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...

  2. elementui 加载中_ElementUI cascader级联动态加载回显和搜索看这个就够了

    这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...

  3. cascader 动态加载 回显_Elementui cascader 级联选择器 动态加载数据,保存后回显的问题...

    问题描述 使用elementui,进行地区选择,分省市区三级动态加载,首次保存后,再次回看数据,怎么选中上次保存的地区 省市区三级都是动态加载,下次回来,只有省一级数据,model里面存的是一个数组, ...

  4. Cascader 级联选择器如何根据给定的叶节点值设置默认值(数据回显)

    转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值 官网cascader:https://element.eleme.cn/#/zh- ...

  5. vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑

    业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问 ...

  6. Element的Cascader 级联选择器禁用和回显问题

    今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...

  7. 【Android 逆向】加壳技术简介 ( 动态加载 | 第一代加壳技术 - DEX 整体加固 | 第二代加壳技术 - 函数抽取 | 第三代加壳技术 - VMP / Dex2C | 动态库加壳技术 )

    文章目录 一.动态加载 二.第一代加壳技术 ( DEX 整体加固 ) 三.第二代加壳技术 ( 函数抽取 ) 四.第三代加壳技术 ( Java 函数 -> Native 函数 ) 五.so 动态库 ...

  8. 懒加载和预加载的区别_类的动态创建(ro,rw)amp; 懒加载类和非懒加载类底层加载的区别 amp; 类和分类的搭配分析...

    黑客技术点击右侧关注,了解黑客的世界! Java开发进阶点击右侧关注,掌握进阶之路! Python开发点击右侧关注,探讨技术话题!作者丨OSMin链接:https://juejin.im/post/5 ...

  9. python爬虫动态加载页面_Python+Selenium爬取动态加载页面(2)

    注: 上一篇<Python+Selenium爬取动态加载页面(1)>讲了基本地如何获取动态页面的数据,这里再讲一个稍微复杂一点的数据获取全国水雨情网.数据的获取过程跟人手动获取过程类似,所 ...

最新文章

  1. c语言中的常用函数的使用,C语言的常用库函数使用方法分析及用途
  2. 2017最新整理传智播客JavaEE第49期 基础就业班
  3. 刀片服务器与机架服务器对比
  4. Dot Net设计模式—外观模式
  5. bzoj1066 蜥蜴 (dinic)
  6. linux下查看所有用户及所有用户组
  7. ECMAScript 6的解构赋值 ( destructuring assignment)
  8. [bzoj1011] [HNOI2008]遥远的行星
  9. 课程作业01的设计思想、程序流程图、源程序代码和结果截图整理
  10. java 反编译 在线_「java反编译工具」分享java反编译工具,超级好用 - seo实验室...
  11. php把字符串日期转成时间戳,php怎样把日期转成时间戳
  12. 2020_WHUCTF_Writeup(部分)
  13. win7系统桌面上计算机不见了怎么办,win7桌面上我的电脑图标不见了怎么办
  14. stm32_GPIO模拟I2c读写EEPROM
  15. 基因表达式编程(GEP)自学 第【3】天 Python 实现
  16. 罗技k380键盘-数字键上的字符对不上怎么办?
  17. 1990-2019年地级市地方财政收支数据(全市)
  18. 【雷达与对抗】【2016】76-81GHz平面天线在汽车雷达中的开发与应用
  19. 解决实际维护网络过程故障的五个盲点
  20. wap页面之iphone设备字体偏大问题

热门文章

  1. 我的2017年前端之路总结
  2. struts2 中文件的位置问题
  3. MATLAB 批量改文件名称
  4. [summary] 单调队列
  5. 视频专辑:JAVA语言入门视频教程
  6. halcon联合C#测量十字Mark中心
  7. numpy——stack
  8. explicit关键字详解(C++ )
  9. python在材料模拟中的应用_基于Python的ABAQUS二次开发及在板料快速冲压成形模拟中的应用...
  10. 连续时间系统与离散时间系统的时域分析对比