二级下拉框联动

二级下拉框联动效果

功能需求: 设计两个下拉框,其中第二个下拉框的值,随着第一个下拉框选中的数据而发生变化,从而实现二级联动搜索功能

重点问题: 第二个下拉框选中数据之后,第一个下拉框的选中值发生变化,第二个下拉框的选项可以变化,但是第二个下拉框的选中值,无法清除.

设计思路:

1. 首先在created声明周期中,请求第一个下拉框的数据,然后在赋值给这个下拉框

2. 在第一个下拉框中,用事件@change方法进行数据监听,一旦下拉框的值发生改变,则直接请求第二个下拉框的数据
   

3. 先清除第二个下拉框中的数据,然后在赋值,否则的话,下拉框中的数据会不断累积,导致数据越来越多

4. 在watch方法中监听第一个下拉框中的值是否改变，如果改变则把第二个下拉框用v-model 绑定的变量的值清空，就可以清空第二个下拉框的选中值。
   

新问题: 但是这时候又有一个问题，就是第二个下拉框的选中值虽然清空了，但是却是选中不了

原因: 这是因为，第二个下拉框的嵌套层次太深，无法进行页面自动刷新，你看着选中框没有值，实际上值已经选中上了，但是要显示出来要怎么办呢，这时候可以在第二个下拉框的改变事件@change方法中，调用vue的强制刷新方法就可以了。

​