动态加载 回显_ElementUI cascader级联动态加载及回显
先看图,你是否也遇到这个需求?
如果你正在焦头烂额,无脑抓瞎,那么你来对地方了,因为我将给你一个简单易懂的实现方案。
我也在网上翻了无数页答案,也照着别人的代码和思路尝试了,事实上并不能解决我这个棘手的问题。
级联下拉选多选、懒加载、数据回显,尽管 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级联动态加载及回显相关推荐
- cascader 动态加载 回显_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...
- elementui 加载中_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...
- cascader 动态加载 回显_Elementui cascader 级联选择器 动态加载数据,保存后回显的问题...
问题描述 使用elementui,进行地区选择,分省市区三级动态加载,首次保存后,再次回看数据,怎么选中上次保存的地区 省市区三级都是动态加载,下次回来,只有省一级数据,model里面存的是一个数组, ...
- Cascader 级联选择器如何根据给定的叶节点值设置默认值(数据回显)
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值 官网cascader:https://element.eleme.cn/#/zh- ...
- vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问 ...
- Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
- 【Android 逆向】加壳技术简介 ( 动态加载 | 第一代加壳技术 - DEX 整体加固 | 第二代加壳技术 - 函数抽取 | 第三代加壳技术 - VMP / Dex2C | 动态库加壳技术 )
文章目录 一.动态加载 二.第一代加壳技术 ( DEX 整体加固 ) 三.第二代加壳技术 ( 函数抽取 ) 四.第三代加壳技术 ( Java 函数 -> Native 函数 ) 五.so 动态库 ...
- 懒加载和预加载的区别_类的动态创建(ro,rw)amp; 懒加载类和非懒加载类底层加载的区别 amp; 类和分类的搭配分析...
黑客技术点击右侧关注,了解黑客的世界! Java开发进阶点击右侧关注,掌握进阶之路! Python开发点击右侧关注,探讨技术话题!作者丨OSMin链接:https://juejin.im/post/5 ...
- python爬虫动态加载页面_Python+Selenium爬取动态加载页面(2)
注: 上一篇<Python+Selenium爬取动态加载页面(1)>讲了基本地如何获取动态页面的数据,这里再讲一个稍微复杂一点的数据获取全国水雨情网.数据的获取过程跟人手动获取过程类似,所 ...
最新文章
- c语言中的常用函数的使用,C语言的常用库函数使用方法分析及用途
- 2017最新整理传智播客JavaEE第49期 基础就业班
- 刀片服务器与机架服务器对比
- Dot Net设计模式—外观模式
- bzoj1066 蜥蜴 (dinic)
- linux下查看所有用户及所有用户组
- ECMAScript 6的解构赋值 ( destructuring assignment)
- [bzoj1011] [HNOI2008]遥远的行星
- 课程作业01的设计思想、程序流程图、源程序代码和结果截图整理
- java 反编译 在线_「java反编译工具」分享java反编译工具,超级好用 - seo实验室...
- php把字符串日期转成时间戳,php怎样把日期转成时间戳
- 2020_WHUCTF_Writeup(部分)
- win7系统桌面上计算机不见了怎么办,win7桌面上我的电脑图标不见了怎么办
- stm32_GPIO模拟I2c读写EEPROM
- 基因表达式编程(GEP)自学 第【3】天 Python 实现
- 罗技k380键盘-数字键上的字符对不上怎么办?
- 1990-2019年地级市地方财政收支数据(全市)
- 【雷达与对抗】【2016】76-81GHz平面天线在汽车雷达中的开发与应用
- 解决实际维护网络过程故障的五个盲点
- wap页面之iphone设备字体偏大问题