vue+element二级联动 清空select问题

        <el-form-item label="大部门">
          <el-select
            v-model="ruleForm.stayDepartmentName"
            placeholder="请选择大部门类型"
            @change="get_large($event)"
          >
            <el-option
              v-for="(item, index) in big_depart_List"
              :key="index"
              :label="item.summaryDepartment"
              :value="item.summaryDepartment"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属部门" prop="departmentId">
          <el-select
            v-model="ruleForm.departmentName"
            placeholder="请选择归属部门类型"
            @change="get_Type($event, ruleForm.departmentName)"
          >
            <el-option
              v-for="(item, index) in departmentName_Type"
              :key="index.id"
              :label="item.departmentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

==

image.png

    get_large(event) {
      // console.log(event, "event");
      this.$set(this.ruleForm, "departmentName", "");
      this.$set(this.ruleForm, "departmentId", "");
      this.big_depart_List.map(i => {
        if (i.summaryDepartment == event) {
          this.departmentName_Type = i.departments;
        }
      });
    },
    get_Type(event) {
      //归属部门
      const newType = this.departmentName_Type.map((item, index) => {
        if (item.id == event) {
          this.ruleForm.departmentId = item.id;
          this.ruleForm.departmentName = item.departmentName;
        }
        return;
      });
    },

====
这个bug卡出了很久，后来发现网上也有这种问题

image.png