vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue 下拉选择框

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

作者:牧羊人の冬天

这篇文章主要介绍了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;
		}},

接口返回的数据结构如下:

到此这篇关于vue + ele 下拉选择框和下拉多选选择框处理的文章就介绍到这了,更多相关vue 下拉选择框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文