二级下拉框联动效果
功能需求: 设计两个下拉框,其中第二个下拉框的值,随着第一个下拉框选中的数据而发生变化,从而实现二级联动搜索功能
重点问题: 第二个下拉框选中数据之后,第一个下拉框的选中值发生变化,第二个下拉框的选项可以变化,但是第二个下拉框的选中值,无法清除.
设计思路:
-
首先在created声明周期中,请求第一个下拉框的数据,然后在赋值给这个下拉框
-
在第一个下拉框中,用事件@change方法进行数据监听,一旦下拉框的值发生改变,则直接请求第二个下拉框的数据
-
先清除第二个下拉框中的数据,然后在赋值,否则的话,下拉框中的数据会不断累积,导致数据越来越多
-
在watch方法中监听第一个下拉框中的值是否改变,如果改变则把第二个下拉框用v-model 绑定的变量的值清空,就可以清空第二个下拉框的选中值。
新问题: 但是这时候又有一个问题,就是第二个下拉框的选中值虽然清空了,但是却是选中不了
原因: 这是因为,第二个下拉框的嵌套层次太深,无法进行页面自动刷新,你看着选中框没有值,实际上值已经选中上了,但是要显示出来要怎么办呢,这时候可以在第二个下拉框的改变事件@change方法中,调用vue的强制刷新方法就可以了。