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

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值

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐