后端查询数据给el-tree-select赋值

大家好！

---

最近在开发过程中遇到一个问题，有一个问题是需要修改列表中某一行的数据，再修改时需要弹出一个修改弹框，弹框中有三行，其中有一行存的姓名，在添加时是使用el-tree-select来添加的，因此在修改时也需要用el-tree-select来修改。

一、el-tree-select

el-tree-select是Element UI中的一个组件，它是el-select和el-tree的结合体，可以用于实现树形结构的选择器。使用el-tree-select可以实现多级联动选择，并且可以选择单个或多个选项。大家有不了解的可以到官网上去看一下源码:TreeSelect树形选择器

二、赋值

1.查询数据

首先我们要知道el-tree-select是通过数组的形式来存放数据的，比如说存放的是人的信息，那么每一个人就是一个数组，数组中会存放这个人的id，name等等的一些信息。我们像后端查询某个人的姓名的话是通过此行数据的id来查的，所以说我们需要把人的id和name也都查出来。具体代码如下:

data(){
    return{
        Person:{
            id: "",
            receiveusers: []
        }
    }
}

此处的receiveusers就代表着我们el-tree-select选中的人的信息都存到这个数组里。之后我们向后端发送请求并查询数据:

async updateinit(){
	const uResponse = await service.getOuAdmin(row.guid);
	let {
		success,
		data,
		message
		} = uResponse;
	if(success === true){
		this.Person.guid = data.guid;
		this.Pseron.receiveusers.push({userGuid : data.Guid},{userName : data.userName}); //给选人框赋值
	}else{
		this.$message.error(message);
	}
}

因为el-tree-select的信息是由数组存储的，所以我们查询名字的话也不能只单一查询名字，需要将此人的id和name都查出来并给我们定义的数组赋值。重要的代码是 this.attendanceAdmin.receiveusers.push({userGuid : data.Guid},{userName : data.userName}); 这样我们就可以把后端查询出来的姓名赋值给el-tree-select了。

总结

以上就是今天要讲的内容，如有不懂可以给作者发私信，觉得有用的话记得点赞加关注！！谢谢观看！！