Vue 实现二个下拉框的联动

功能：

实现选择机构，部门展示属于机构的列表

1：定义二个下拉框，按照组件绑定好，机构选定下拉项的时候给一个改变事件

<el-form-item>
        <el-select placeholder="机构" v-model="form.organ" clearable @change="getdept">
          <el-option
            v-for="item in organOptions"
            :label="item.name"
            :value="item.name"
            :key="item.institutionID"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="部门" v-model="form.dept" clearable>
          <el-option
            v-for="item in deptOptions"
            :label="item.departname"
            :value="item.departname"
            :key="item.departname"
          />
        </el-select>
</el-form-item>

2：定义好变量

<script>
export default {
  data() {
    return {
        form: {
            organ: "",
            dept: "",
        },
        organOptions: [],
        deptOptions: [],
    }
  }
}
</scipt>

3：实现以及调用的方法

mounted() {
    this.getOptions();
},

//机构方法

getOptions() {
      axios({
        url: "XXX",
        method: "post"
      }).then(res => {
        if (res.data.code === 200) {
          this.organOptions = res.data.data;
        }
      });
 },

4：选择一个框的时候，记得将这个框的参数带过去给另一个框的接口

//部门方法

getdept(){
      axios({
        url: "XXX",
        method: "post",
        params:{
            departname:this.form.organ //第一个框的v-model的那个参数
        },
      }).then(res => {
        console.log('部门',res);
        if (res.data.code === 200) {
          this.deptOptions = res.data.data;
        }
      });
 },

Vue 实现二个下拉框的联动

悦读