项目业务需求：设计两个搜索下拉框，其中二级下拉框的数据随着一级下拉框选中的数据而变化。从而实现二级联动搜索功能。
理解业务需求：通常来说我们树型下拉框的数据库设计是在同一个表，且子节点会储存对应的多个祖节点（父节点+父节点的父节点+父节点的父节点的父节点+……+父节点^n）Id。例如：多个城市子节点归属一个省份父节点，多个省份子节点又归属一个国家父节点。这里数据库中城市祖节点就包括了省份Id和国家Id。
1.如果需要新增城市的下一级，如区和县的子节点，我们直接在市省国的这张表直接添加数据就行，因为这些都属于地名，可以共存或者说共用一张数据库表。
2.如果需要新增城市的所属其他信息，如大学的子节点，这时大学数据库设计的时候是另外一张表，它的数据库只关联一个城市Id。我们就可以用两个下拉框来实现二级联动搜索功能。
功能实例说明：当我点击一级下拉框的时候，例如：选择中国福建省福州市，二级下拉框会自动匹配只有福州市的大学选项；当我点击一级下拉框的时候，选择中国福建省厦门市，二级下拉框会自动匹配只有厦门市的大学选项。这时候再根据二级列表搜索大学详情信息就会准确、方便、且直观很多。
效果图：
代码实现：
核心源码
index.vue
<el-form-item label="归属地区" prop="areaId"><treeselectv-model="queryParams.areaId":options="areaOptions"placeholder="请选择归属地区"size="small"/></el-form-item><el-form-item label="大学名称" prop="universityName"><el-selectv-model="queryParams.universityName"placeholder="请选择大学名称"clearablesize="small":loading="loading"><el-optionv-for="(item, index) in universityList":value="item.universityName":key="index">{{ item.universityName }}</el-option></el-select></el-form-item>
<el-tablev-loading="loading":data="UniversityInfoList"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-columnlabel="所属地区"align="center"prop="areaName":show-overflow-tooltip="true"/><el-table-columnlabel="大学编号"align="center"prop="universityNo":formatter="universityNoFormat"/><el-table-columnlabel="大学名称"align="center"prop="universityName":formatter="universityNameFormat"/><el-table-columnlabel="操作"align="center"class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)"v-hasPermi="['university:UniversityInfo:edit']">修改</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['university:UniversityInfo:delete']">删除</el-button></template></el-table-column></el-table><paginationv-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 大学信息集合*/@Overridepublic 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进行更改！
