vue表单联动 +导入数据

效果如下：

默认选择是计算机学院软件工程，当把第一个下拉框选项改为通信与信息工程学院时
，后边的下拉框选项变化，比如第一项变成了通信工程
注： 使用了elemenui，若不需要，可以改成将标签改为普通HTML标签

实现过程：

1. select部分：用v-for加载选项列表，选择的选项改变时使用v-on:change定义一个方法跟踪选择值的变化

 <select v-on:change="indexSelectCollege($event)">
            <option v-for="(option1, index1) in college" :value="option1.text" :key="index1">{
   {
   option1.text}}</option>
          </select>
          <select v-on:change="indexSelectProfession($event)">
            <option v-for="(option2, index2) in professionList" :value="option2.text" :key="index2">{
   {
   option2.text}}</option>

2. method部分：默认选择设置字段 activeCollege和 activeProfession，设置初值后，每次选择改变时，改变他们的值（ activeCollege和 activeProfession是当前选择的学院以及专业）

methods: {
   
    indexSelectCollege (event) {
   
      this.joinForm.activeCollege = event.target.value
      console.log(this.joinForm.activeCollege)
    },
    indexSelectProfession (event) {
   
      this.joinForm.activeProfession = event.target.value
      console.log(this.joinForm.activeProfession)
    }
  }

3. watch部分，监视data中 activeCollege的变化情况， activeCollege变化时，遍历college数组，找出对应的profession数组，更新professionList数组

 watch: {
   
    'joinForm.activeCollege': function () {
   
      for (