element组件cascader使用v-model无法动态设置默认值的问题

动态设置级联选择器的默认值

cascader中的v-model属性是用来绑定级联选择器的默认值,使用方法如下:

<el-cascader
    v-model="select"//这个是级联选择器默认绑定的值,必须是一个数组,里面存默认显示选项的value值
    :options="options"//这个是级联选择器的数据源,也是一个数组
></el-cascader>
动态绑定的级联选择器的应用场景,比如我们修改一条数据所在的省市区,那个我们在点开级联选择器的时候,需要级联选择器默认你显示没有修改之前的所在区域
  • 如果直接修改v-model中绑定的值,虽然级联选择器显示的默认值发生了改变,但是点开之后,默认的选项并没有刷新,是之前所点击的选项。
  • 我所应用的场景是,这个级联选择器是我组件中的一个插件,我在点击修改的时候会让这个组件显示出来,然后通过属性传值(父传子)的方式把所修改的数据传给子组件,包括v-model所绑定的那个默认值,出现了上述的情景,但是出现了只有在第一次更改的时候默认选中的效果是有的。后面怎么更改点击,都是显示的事上一次的默认选中的值,但是cascader中所显示的是默认选中的值,只是点开的时候不会默认跳转到那个默认值上
解决方法

只需要给级联选择器加一个:v-if,这个值我用的是父组件传过来的显示的默认值,这个应该是起到了刷新的效果

<el-cascader
    v-if="select"//我使用的是父组件传过来的默认显示的值
    v-model="select"
    :options="options"
></el-cascader>

这样就可以动态设置级联选择器的默认值了,点击的时候会默认跳转选中v-model传过来的值了,再次注意v-model所绑定的默认值类型是一个数组,并且是选项对应的value值

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值