您现在的位置是:网站首页> 编程资料编程资料
解决element ui cascader 动态加载回显问题_vue.js_
2023-05-24
458人已围观
简介 解决element ui cascader 动态加载回显问题_vue.js_
elementui是基于vue2.0的组件库,专为开发人员、设计人员而设计的;可以快速搭建项目框架,集成了界面样式,先给大家介绍下element ui cascader 动态加载回显问题解决方法。
props: { lazy: true, async lazyLoad(node, resolve) { } }
但是当我赋值给cascader的时候,cascader却不显示了。只要重新加载下cascader组件就行。
async updateAddress(data) { this.addressInfo=['广东省', '佛山市', '顺德区', '龙江镇'] this.isShowAddressInfo = false; // 这里搞个定时器重新载入一下组件就可以触发组件拉取数据 setTimeout(() => { this.isShowAddressInfo = true; }, 500); }补充:史上最简单的el-cascader动态加载回显的解决办法
教大家最简单的element-ui的el-cascader级联选择器回显方法,特别是对动态加载时特别简单,不过确实有点辣眼睛。废话不多说了,就是使用el-cascader标签的:placeholder属性来回显内容。例如:我要回显示园区名称,代码如下:
原理很简单,就是在要回显时把form.parkName的属性内容准备好就行,不过,这样回显内容字体颜色比较淡,但无伤大雅!还有一点就,如果在修改el-cascader的内容时如果是清空的话,别忘了把form.parkName的内容也清空哦,不然显示内容会与实际不符。最后需要注意的话,虽然回显内容没有问题,但是parkOptions的值需要按套路正确操作。
到此这篇关于element ui cascader 动态加载回显问题解决方法的文章就介绍到这了,更多相关element ui cascader 动态加载回显内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- element el-tree折叠收缩的实现示例_vue.js_
- JavaScript Map 和 Object 的区别解析_javascript技巧_
- 浅谈React useDebounce 防抖原理_React_
- el-tree的实现叶子节点单选的示例代码_vue.js_
- vue el-select与el-tree实现支持可搜索树型_vue.js_
- Vue 和 Django 实现 Token 身份验证的流程_vue.js_
- 解决el-tree数据回显时子节点部分选中父节点都全选中的坑_vue.js_
- 利用React实现一个有点意思的电梯小程序_React_
- el-table 行合并的实现示例_vue.js_
- JSON.stringify(递归)与 JSON.parse(有限状态自动机)的实现代码_javascript技巧_
