史上最简单的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的值需要按套路正确操作。如果大家还有问题,请留言!

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值