动态设置级联选择器的默认值
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值