element ui cascader 动态加载回显问题解决方法

我用的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);
 }
  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 21
    评论
el-cascader 是一个基于 Element UI 的级联选择器组件,支持动态加载选项。如果需要实现 el-cascader 动态加载回显的功能,可以按照以下步骤进行: 1. 在 el-cascader 组件的 v-model 绑定的数据中,设置默认值。例如,如果需要回显省市区三级联动选择器的选中值,可以设置一个数组,其中包含省、市、区的 ID 值。 2. 在 el-cascader 的 props 中,设置 lazy 属性为 true,表示开启动态加载选项的功能。 3. 在 el-cascader 的 props 中,设置 lazyLoad 属性为一个函数,用于加载每个级别的选项。该函数接收两个参数:当前级别的选项数组和当前级别的节点数据。可以根据节点数据的值,从后端获取对应级别的选项数据,并将其添加到选项数组中。 4. 在组件 mounted 钩子函数中,调用 el-cascader 的 loadData 方法加载第一级别的选项数据。 5. 在 el-cascader 的 change 事件中,根据当前选中的值,动态加载下一级别的选项数据,并更新绑定的 v-model 数据。 下面是一个示例代码: ``` <template> <el-cascader v-model="selectedOptions" :options="options" :lazy="true" :lazy-load="loadOptions" @change="handleChange" ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [1, 2, 3], // 默认选中的值 options: [], // 选项数据 }; }, mounted() { this.$nextTick(() => { this.$refs.cascader.loadData(); // 加载第一级别的选项数据 }); }, methods: { loadOptions(selectedOptions, parentNode, resolve) { // 根据 parentNode.value 从后端获取对应级别的选项数据,并添加到 selectedOptions 中 // 最后调用 resolve 方法,通知 el-cascader 加载完成 resolve(selectedOptions); }, handleChange(selectedOptions) { // 根据当前选中的值,动态加载下一级别的选项数据 // 并更新绑定的 v-model 数据 }, }, }; </script> ```
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三和小钢炮

谢谢客官~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值