亲宝软件园·资讯

展开

element ui cascader 动态加载回显

web前端面试小助手 人气:0

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的值需要按套路正确操作。

加载全部内容

相关教程
猜你喜欢
用户评论