vue 设置下拉框三级联动

如图中，用vue实现三个选择框是联动关系，首先选择厂商，然后品牌下拉框中出现的品牌是所选厂商包含的品牌，同理，选择完品牌后，车型也是所选品牌中包含的车型。

例如有这样的对应关系：

界面如图所示：

我们想要的效果是：

在选择了长城后，品牌选择框中只出现长城的品牌。

本篇文章中只介绍vue的实现，不接受后台接口的实现。（如有需要可以留言）

先介绍接口文件中需要写的调后台的代码，由于我做的系统的业务需求，所以接口写在了不同的文档。

api/motorcycle/firm.js文件中;

export function firmList() {
  return request({
    url: '/instructions/firm/firmList',
    method: 'get'
  })
}

api/motorcycle/brand.js文件中：

export function brandList(query) {
  return request({
    url: '/instructions/brand/brandList',
    method: 'get',
    params: query
  })
}

api/motorcycle/model.js文件中：

export function modelList(query) {
  return request({
    url: '/instructions/model/modelList',
    method: 'get',
    params: query
  })
}

写好接口后，写页面的vue文件：

第一步：添加下拉框

<div class="filter-container">
	
      <el-select class="filter-item" v-model="listQuery.firmId" placeholder="请选择厂商" style="width: 200px !important;" @change="selectFirm()">
        <el-option v-for="item in firmOptions" :key="item.name" :label="item.name" :value="item.id" >
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
        </el-option>
      </el-select>

      <el-select class="filter-item" v-model="listQuery.brandId" placeholder="请选择品牌" style="width: 200px !important;" @change="selectBrand()">
        <el-option v-for="item in brandOptions" :key="item.name" :label="item.name" :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
        </el-option>
      </el-select>

      <el-select class="filter-item" v-model="listQuery.modelId" placeholder="请选择车型"  style="width: 200px !important;">
        <el-option v-for="item in modelOptions" :key="item.name" :label="item.name" :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
        </el-option>
      </el-select>
	  
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button v-if="heat_add" class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
</div>

其中重要的是每个下拉框中的v-model属性和@change属性。v-model属性中写的是选择完后，点击搜索提交的表单数据。@change是真正实现三个下拉框联动。

第二步：引入查询厂商、品牌、车型的接口

import { brandList } from '@/api/motorcycle/brand';
import { firmList } from '@/api/motorcycle/firm';
import { modelList } from '@/api/motorcycle/model';

这三个接口也就是我们最前面写的对应后台的接口

第三步：初始化选择框

form: {},
firmOptions:[],
brandOptions:[],
modelOptions: []

第四步：@change函数

厂商下拉框的数据是需要在访问界面的时候就查询出来，并且赋予厂商下拉框的。在创建的方法中查询并赋值。

created() {
    this.getList();
	firmList().then(response => {
        this.firmOptions = response.data;
    })
 }

品牌的下拉框是点击完厂商后查询赋值的，同理车型的下拉框是点击完品牌后查询赋值的。

    // 选择厂商后
    selectFirm() {
        // 加载 品牌
        brandList({firmId: this.listQuery.firmId}).then(resopnse => {
          this.brandOptions = resopnse.data;
        })
    },
    // 选择品牌后
    selectBrand(){
    // 加载车型
        modelList({brandId: this.listQuery.brandId}).then(response => {
        this.modelOptions = response.data;
      })
    },

这样就全部完成了下拉框的联动。如果错误的地方，请指教。