最近在学习使用若依分离版框架，想要实现下拉框动态加载另一张表的数据，于是参考【字典数据-字典名称】的实现方式，成功试下下拉框动态加载，做下记录

涉及表格：his_user（用户表）-- 用户管理，his_depts（科室表）-- 科室管理

目的：用户管理页面实现下拉框调用科室表的科室名称字段depts_name

实现效果：
新增用户

修改用户

数据库方面

## his_dept
DROP TABLE IF EXISTS `his_dept`;
CREATE TABLE `his_dept`  (`depts_id` int(0) NOT NULL AUTO_INCREMENT COMMENT '科室编号',`depts_name` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '科室名称',`depts_code` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '科室编码',`create_by` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '创建者',`create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',`update_by` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '更新者',`update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',PRIMARY KEY (`depts_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 110 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;### his_user
DROP TABLE IF EXISTS `his_user`;
CREATE TABLE `his_user`  (`id` int(0) NOT NULL AUTO_INCREMENT COMMENT 'ID',`name` varchar(60) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '姓名',`age` bigint(0) NULL DEFAULT NULL COMMENT '年龄',`dept_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '科室名称',`remark` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '备注',`create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',`create_by` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '创建人',`update_time` datetime(0) NULL DEFAULT NULL COMMENT '修改时间',`update_by` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '修改人',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;SET FOREIGN_KEY_CHECKS = 1;

首先，需要保证his_user表格里存在下拉框的保存字段，如dept_name用来存储科室名称

domain层（HisUser）

此处是借助若依【代码生成】工具直接生成相关代码，涉及到的功能（get、set、toString（））

	/** 科室名称 */@Excel(name = "科室名称")private String deptName;public void setDeptName(String deptName) {this.deptName = deptName;}public String getDeptName() {return deptName;}

mapper层（HisDeptMapper）

1. 在科室管理中添加查询所有科室功能（HisDeptMapper.java）

	/*** 查询所有科室信息* @return 科室管理信息集合*/public List selectHisDeptAll();

2. 在Mybatis中添加相关数据库查询信息（HisDeptMapper.xml）

Service层

1. 在科室管理中添加查询所有科室功能（IHisDeptService.java）

	/*** 查询所有科室列表*/public List selectHisDeptAll();

2. 在impl中补充实现查询科室功能（IHisDeptServiceImpl.java）

	@Overridepublic List selectHisDeptAll() {return hisDeptMapper.selectHisDeptAll();}

api界面

在科室管理的api中添加查询科室功能（dept.js）

	//获取科室选择框列表export function optionselect(){return request({url: '/test/dept/optionselect',method: 'get'})}

view前端界面

在用户管理引用前面在科室管理中实现的功能（user/index.vue）

1. 引入apiimport { optionselect as getDeptOptionSelect } from "@/api/test/dept";2. data中创建查询数组// 科室数据deptOptions: [],3. 创建查询方法/*** 查询科室列表*/getDeptList(){getDeptOptionSelect().then(response =>{this.deptOptions = response.data;})}4. 在新增和修改方法中引用/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加用户管理";this.getDeptList();},/** 修改按钮操作 */handleUpdate(row) {this.reset();const id = row.id || this.idsthis.getDeptList();getPeople(id).then(response => {this.form = response.data;this.open = true;this.title = "修改用户管理";});},5. 在对话框中修改科室名称列，调整为如下

自己刚开始学习，功能基本上属于比着葫芦画瓢，如有不对的地方，请批评指正🤝