vue + ele 实现下拉选择框和下拉多选选择框处理方案

<!-- 添加项目的弹框 -->
<el-dialog v-model="addDlg"  class="pro_dialog" title="添加项目" width="40%">
	<el-form :model="addForm">
		<el-form-item label="项目名"><el-input v-model="addForm.name" autocomplete="off" class="input-field"/></el-form-item>
		<el-form-item label="部门">
		<el-tree
		ref="departmentTreeRef"
		:data="departmentTree"
		:props="departmentTreeProps"
		show-checkbox
		highlight-current
		node-key="id"
		v-model="addForm.org"
		></el-tree>
		</el-form-item>
		<el-form-item label="负责人" >
			<el-select v-model="addForm.leader" autocomplete="off" multiple filterable class="input-field">
			<el-option 
			v-for="leader in filterLeaders" 
			:key="leader.id" 
			:label="leader.userName" 
			:value="leader.id"></el-option>
			</el-select>
		</el-form-item>
	</el-form>
	<template #footer>
		<span class="dialog-footer">
			<el-button @click="addDlg = false" size="mini">取消</el-button>
			<el-button type="primary" @click="addPro" size="mini">确定</el-button>
		</span>
	</template>
</el-dialog>

// 获取所有用户
	async getLeaders() {
		try {
			const response = await this.$api.getUsers();
			this.leaders = response.data.result.records;
		} catch (error) {
			console.error(error);
		}},
	// 获取所有机构
	async getorgInfo() {
		try {
			const response = await this.$api.getOrgInfo();
			if (response.data.code === "0"){
				this.departmentTree = [response.data.result];
			}
		} catch (error) {
			console.error(error);
		}},
	// 点击进入项目
	clickView(pro) {
		// 将选中的项目信息保存的vuex
		this.selectPro(pro);
		// 路由跳转
		this.$router.push({ name: 'home' });
	},
	// 点击添加项目按钮
	clickAdd() {
		// 将添加表单置空
		this.addForm = {
			name: '',
			leader: [],
			org:[]
		};
		// 显示模态框
		this.addDlg = true;
	},
	// 点击编辑项目按钮
	clickEdit(item) {
		this.updateForm = {
			id:item.id,
			name:item.name,
			leader:item.leader.map(leader => leader.userId),
			org:item.org.map(org => this.findOrgNodeById(this.departmentTree,org.orgId))
		};
		this.defaultCheckedKeys =  this.updateForm.org.map(org => org.id);
		// 保存默认值
		const temp = [...this.defaultCheckedKeys];  
		this.updateDlg = true;
		this.$nextTick(() => {
			if (this.$refs.departmentTreeRef){
				// 用$refs清空已勾选的，否则不生效，重新勾选，
				this.$refs.departmentTreeRef.setCheckedKeys([]);
				this.defaultCheckedKeys = temp;
			}		
		})
	},
	// 点击删除按钮
	clickDelete(id) {
		ElMessageBox.confirm('确定要删除该项目吗?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(() => {
				this.deletePro(id);
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除'
				});
			});
	},
	//在机构列表中根据id查找对应节点的label
	findOrgNodeById(nodes, id) {
		for (const node of nodes) {
		if (node.id === id) {
			return node;
		}
		// 递归查找子节点
		if (node.childOrg && node.childOrg.length > 0) {
			const foundNode = this.findOrgNodeById(node.childOrg, id);
			if (foundNode) {
			return foundNode;
			}}}
		return null;
	},
	// 添加项目
	async addPro() {
		// 获取选中的部门id
		const selectedOrgIds = this.$refs.departmentTreeRef.getCheckedNodes().map(node => node.id);
		//根据部门查找部门名称
		const selectedOrgLabels = selectedOrgIds.map(orgId => {
			const orgNode = this.findOrgNodeById(this.departmentTree, orgId);
			return orgNode && orgNode.name ? orgNode.name : "";
		});
		//组装部门数据
		const orgData = selectedOrgIds.map((id, index) => {
				return { orgId: id, orgName: selectedOrgLabels[index] };
				});
		//组装请求数据
		const data = {
			name: this.addForm.name,
			org:orgData,
			// 根据id获取用户名
			leader: this.addForm.leader.map(id => {
				const leaderinfo = this.leaders.find(leader => leader.id==id);
				return{
					userId:id,
					userName:leaderinfo.userName
				}})};
		const response = await this.$api.createProjects(data);
		if (response.status === 201) {
			this.$message({
				message: '添加成功!',
				type: 'success',
				duration: 1000
			});
			// 刷新页面数据
			this.getAllPro();
			this.addDlg = false;
		}},