vue中实现两个下拉列表动态联动

首先，这是一个我自以为的骚操作，但其实后来想想实现起来其实很简单，但是它惊艳到了我，那我就记录一下；就像对象并不是很漂亮，但是她就是…，就是一拳打在…，打在…，打在了我的心巴上，所以就喜欢上了。

需求

先说一下需求，查询框中有公司列表和部门列表，其中它俩都是通过在后端取值以下拉列表的形式展示出来以供选择；

其中公司列表在生命周期函数created( )中就获取，也就是说，页面初始化之后，公司列表就已经存在了；

而部门列表，则是需要根据选择的公司的不同而对应的展示出其部门列表，部门列表需要获取到对应的公司编号后再去查询数据并展示出来。

具体实现代码如下：

html部分

<!-- 公司选择框，为了实现选中公司后部门查询框能够动态的获取到公司列表，在公司选择框中绑定一个change 事件 -->


<el-form-item label="公司名称" prop="company_no">
   <el-select
      v-model="form.company_no"
      style="width: 100%"
      placeholder="请选择公司"
      @change="getcompany"
      clearable
   >
      <el-option
          v-for="item in companys"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      >
      </el-option>
   </el-select>
</el-form-item>


<!-- 部门选择框 -->
<el-form-item label="部门" prop="departid">
    <el-select
       v-model="departid"
       style="width: 100%"
       placeholder="请选择部门"
       clearable
    >
       <el-option
          v-for="item in deptlist"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          multiple
       >
       </el-option>
    </el-select>
</el-form-item>

javascript部分

//接口
import { getJson } from "@/api/user";


//存储数据
data(){
    return{
      // 查询框中的部门列表
      deptlist: [],
      // 查询框中的公司列表
      companys: [],
      form: {
        company_no: "",
        depart_id: "",
      }
    }
}


// 获取到公司编号才去获取该公司的部门
getcompany(val) {
   let data = {
      company_no: val,
   };
   getJson(data).then((res) => {
      this.deptlist = res.data.depart;
   });
},
    
    
//在生命周期函数中获取公司列表
created() {
	// 初始化 获取  公司列表
    this.getType();
},
    
    
//获取类型
getType() {
   getJson().then((res) => {
      this.companys = res.data.company_list;
   });
},