vue 设置下拉框三级联动

2022-07-07 12:46:40

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

例如有这样的对应关系:

厂商品牌车型
长城哈弗HB01
HB02
HB03
WEYHB11
HB13
HAVELAH21
北汽越野BJ20
BJ40
商务x55

界面如图所示:

我们想要的效果是:

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

本篇文章中只介绍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;
      })
    },

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

  • 作者:艾吉玛
  • 原文链接:https://blog.csdn.net/aijima0904/article/details/83182646
    更新时间:2022-07-07 12:46:40