Vue+ElementUI实现下拉框的二级联动

项目业务需求：设计两个搜索下拉框，其中二级下拉框的数据随着一级下拉框选中的数据而变化。从而实现二级联动搜索功能。
理解业务需求：通常来说我们树型下拉框的数据库设计是在同一个表，且子节点会储存对应的多个祖节点（父节点+父节点的父节点+父节点的父节点的父节点+……+父节点^n）Id。例如：多个城市子节点归属一个省份父节点，多个省份子节点又归属一个国家父节点。这里数据库中城市祖节点就包括了省份Id和国家Id。
1.如果需要新增城市的下一级，如区和县的子节点，我们直接在市省国的这张表直接添加数据就行，因为这些都属于地名，可以共存或者说共用一张数据库表。
2.如果需要新增城市的所属其他信息，如大学的子节点，这时大学数据库设计的时候是另外一张表，它的数据库只关联一个城市Id。我们就可以用两个下拉框来实现二级联动搜索功能。
功能实例说明：当我点击一级下拉框的时候，例如：选择中国福建省福州市，二级下拉框会自动匹配只有福州市的大学选项；当我点击一级下拉框的时候，选择中国福建省厦门市，二级下拉框会自动匹配只有厦门市的大学选项。这时候再根据二级列表搜索大学详情信息就会准确、方便、且直观很多。

效果图：





代码实现：

核心源码

index.vue

<el-form-item label="归属地区" prop="areaId">
  <treeselect
    v-model="queryParams.areaId"
    :options="areaOptions"
    placeholder="请选择归属地区"
    size="small"
  />
</el-form-item>
<el-form-item label="大学名称" prop="universityName">
  <el-select
    v-model="queryParams.universityName"
    placeholder="请选择大学名称"
    clearable
    size="small"
    :loading="loading"
    ><el-option
      v-for="(item, index) in universityList"
      :value="item.universityName"
      :key="index"
      >{{ item.universityName }}
    </el-option>
  </el-select>
</el-form-item>

<el-table
 v-loading="loading"
  :data="UniversityInfoList"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column
    label="所属地区"
    align="center"
    prop="areaName"
    :show-overflow-tooltip="true"
  />
  <el-table-column
    label="大学编号"
    align="center"
    prop="universityNo"
    :formatter="universityNoFormat"
  />
  <el-table-column
    label="大学名称"
    align="center"
    prop="universityName"
    :formatter="universityNameFormat"
  />
  <el-table-column
    label="操作"
    align="center"
    class-name="small-padding fixed-width"
  >
    <template slot-scope="scope">
      <el-button
        size="mini"
        type="text"
        icon="el-icon-edit"
        @click="handleUpdate(scope.row)"
        v-hasPermi="['university:UniversityInfo:edit']"
        >修改</el-button
      >
      <el-button
        size="mini"
        type="text"
        icon="el-icon-delete"
        @click="handleDelete(scope.row)"
        v-hasPermi="['university:UniversityInfo:delete']"
        >删除</el-button
      >
    </template>
  </el-table-column>
</el-table>

<pagination
  v-show="total > 0"
  :total="total"
  :page.sync="queryParams.pageNum"
  :limit.sync="queryParams.pageSize"
  @pagination="getList"
/>

watch: {
    // 监听地区Id：areaId
    "queryParams.areaId": "getUniversityList",
    }

添加监听地区Id，选中一级下拉框的地区时触发getUniversityList方法，获取大学列表方法（后端实现如下）

UniversityInfo实体类

大学Id：universityId
大学编号：universityNo
大学名称：universityName
所属地区：areaId

UniversityService服务层

/**
 * 查询大学信息列表
 *
 * @param universityInfo 大学信息
 * @return 大学信息集合
 */
List<UniversityInfo> selectUniversityInfoList(UniversityInfo universityInfo);

UniversityServiceImpl服务实现层

/**
 * 查询大学信息列表
 *
 * @param universityInfo 大学信息
 * @return 大学信息集合
 */
@Override
public List<UniversityInfo> selectUniversityInfoList(UniversityInfo universityInfo) {
    return universityInfoMapper.selectUniversityInfoList(universityInfo);
}

UniversityMapper接口

/**
 * 查询大学信息列表
 *
 * @param universityInfo 大学信息
 * @return 大学信息集合
 */
List<UniversityInfo> selectUniversityInfoList(UniversityInfo universityInfo);

UniversityMapper.xml

<select id="selectUniversityInfoList" parameterType="UniversityInfo" resultMap="UniversityInfoResult">……</select>

UniversityController控制层

/**
 * 查询大学信息列表
 */
@PreAuthorize("@ss.hasPermi('university:UniversityInfo:list')")
@GetMapping("/list")
public AjaxResult getList(UniversityInfo universityInfo){
    return AjaxResult.success(rusticateInfoService.selectUniversityInfoList(universityInfo));
}

UniversityInfo.js

import request from '@/utils/request'
// 查询大学信息列表
export function UniversityInfo(query) {
  return request({
    url: '/university/UniversityInfo/list',
    method: 'get',
    params: query
  })
}

index.vue

import {listUniversityInfo} from "@/api/UniversityInfo";
export default {
  name: "UniversityInfo",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 大学ID字典
      universityIdOptions: [],
      // 大学信息列表
      rusticateList: [],
      // 地区字典
      areaOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        areaId: undefined,
        universityNo: undefined,
        universityName: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules:{}
    };
  }
	watch: {
	    // 监听地区Id：areaId，选择地区后获取该地区下的所有二级大学信息
	    "queryParams.areaId": "getUniversityList",
	    }
	created() {
	    const universityId = this.$route.query && this.$route.query.universityId;
	    this.queryParams.universityId = universityId;
	    this.getList();
	    this.getTreeselect();
	    this.getUniversityList();
	  },
	methods: {
	// 大学编号字典翻译
    universityNoFormat(row, column) {
      return row.universityNo;
    },
    // 大学名称字典翻译
    universityNameFormat(row, column) {
      return row.universityName;
    },
	/** 查询大学信息列表 */
    getList() {
      this.loading = true;
      listUniversityInfo(this.queryParams).then((response) => {
        this.universityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
	/** 查询大学列表（下拉框数据：选择地区后获取该地区下的所有二级大学信息） */
	getUniversityList() {
	  listUniversityInfo(this.queryParams).then((response) => {
	    this.universityList = response.data;
	    // this.total = response.total;
	    this.loading = false;
	  });
	}
  }
}

F12，查看获取列表方法的response，this.universityList = response.data;根据请求返回的数据是rows还是data进行更改！