如何让Element UI的级联选择器动态加载后正确回显选中项？

本文共计548个文字，预计阅读时间需要3分钟。

Element UI 是一个基于 Vue 2.0 的组件库，专为开发者、设计者设计；快速搭建项目框架，集成了界面样式，简化了开发流程。

关于 Element UI 与 Cascader 组件结合动态加载问题的解决方法：

1. 使用 `lazy` 属性进行动态加载。

2.设置 `lazyLoad` 属性，并提供 `lazyLoadMethod` 方法来实现数据的异步加载。

3.确保 `props` 中的 `lazy` 属性值为 `true`。

示例代码：

vue

elementui是基于vue2.0的组件库，专为开发人员、设计人员而设计的；可以快速搭建项目框架，集成了界面样式，先给大家介绍下element ui cascader 动态加载回显问题解决方法。

props: { lazy: true, async lazyLoad(node, resolve) { } }

但是当我赋值给cascader的时候，cascader却不显示了。只要重新加载下cascader组件就行。

<el-cascader v-if="isShowAddressInfo" v-model="form.addressInfo" :props="props"></el-cascader>

async updateAddress(data) { this.addressInfo=['广东省', '佛山市', '顺德区', '龙江镇'] this.isShowAddressInfo = false; // 这里搞个定时器重新载入一下组件就可以触发组件拉取数据 setTimeout(() => { this.isShowAddressInfo = true; }, 500); }

补充：史上最简单的el-cascader动态加载回显的解决办法

教大家最简单的element-ui的el-cascader级联选择器回显方法，特别是对动态加载时特别简单，不过确实有点辣眼睛。废话不多说了，就是使用el-cascader标签的:placeholder属性来回显内容。例如：我要回显示园区名称，代码如下：

<el-cascader                 v-if="isShowInfo"                 ref="parkCascader"                 v-model="parkOptions"                 :props="parkParams"                 @change="handleChange"                 :show-all-levels="true"                 :placeholder="form.parkName"                 style="width: 100%"                 clearable>               </el-cascader>

原理很简单，就是在要回显时把form.parkName的属性内容准备好就行，不过，这样回显内容字体颜色比较淡，但无伤大雅！还有一点就，如果在修改el-cascader的内容时如果是清空的话，别忘了把form.parkName的内容也清空哦，不然显示内容会与实际不符。最后需要注意的话，虽然回显内容没有问题，但是parkOptions的值需要按套路正确操作。

到此这篇关于elementuicascader动态加载回显问题解决方法的文章就介绍到这了,更多相关elementuicascader动态加载回显内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！