如圖中，用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;
      })
    },

這樣就全部完成了下拉框的聯動。如果錯誤的地方，請指教。