啥也不会的实习生：以字典方式给前后端项目添加下拉框查询

目录

前言

场景

实现

 后端接口：调用的方法getDicts是外部引用的公共方法，数据来自当前的接口，接口功能：根据类型，找到目标数据。

接下来是对数据库的操作：

---

前言

这次的任务给还是给项目添加一个如图所示的下拉搜索框实现筛选功能，不用用户自己去输入。

左边的车辆状态是已经完成的项目中原有的，右边的是我需要做的省份，我要做的说实在点其实也就是照着原来的代码找不同，修改后添加上去，结合数据库添加一些字段来实现功能。真让我现在自己去实现搭建一个前后端项目难度还是太大了。

这次的功能实现也是很多看了很多其他博客才实现，我的这次功能实现也有很大一部分看了这篇才完成的。这篇

ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示_BADAO_LIUMANG_QIZHI的博客-优快云博客

场景

我目前拿到的项目是一个基于Vue+ElementUI+axios+SpringBoot前后端分离的数据分析系统。需要我做的东西很多也就是添加一些简单的功能，前端的偏多一点，后端和数据库增删改查较少。

实现

首先实现前端页面下拉框赋值，依旧照葫芦画瓢，添加如下代码：

主要控件部分：

 <el-form-item label="省份" prop="province">
         <el-select v-model="queryParams.province" placeholder="请选择省份" clearable size="small">
          <el-option
            v-for="dict in provinceOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
      </el-select>
      </el-form-item>

通过学习了解这里绑定的下拉框的数据源是一个provinceOption这个对象数组，这是一个请求后台数据返回的键值对的数组。 

这个对象数组需要声明

  data() {
    return {
      // 添加省份状态字典
      provinceOptions: [],