element组件cascader使用v-model无法动态设置默认值的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
动态设置级联选择器的默认值
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分支:2 个月前 )
c345bb45
6 个月前
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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)