实现效果
要做一个选择左边班级与右边数据关联起来的页面,效果如下,第一张是初始化效果,只有当选中班级并且查询之后右边才有相关数据
查找数据思路
本网站的后台是使用小程序云开发,数据都是通过云函数获取
- 首先我们要思考一下怎么根据左边的去获取右边的数据,el-tree有个方法是可以获取所有选中的节点的,所以当我们选中五年级一班,会有三个数据,分别是学校、年级、班级的,此时最方便的方法就是只保存班级的然后根据班级去查找(班级里面有这个班所有学生的id),拿到这个班级之后就根据每一个学生id去数据库中查找相关学生。下一次查找时将当前学生清空后再次重新找一遍【还可以自己使用更方便的方法】
<el-tree
:data="treeData"
show-checkbox
node-key="id"
ref="leftTree"
default-expand-all
row-key="deptId"
:expand-on-click-node="true"
:highlight-current="true"
@check-change="CheckChange"
class="filter-tree"
>
</el-tree>
CheckChange() {
//选中节点,再根据节点去判断当前哪一个是班级的,保存起来
let res = this.$refs.leftTree.getCheckedNodes();
this.handleCheckChange(res)
},
handleCheckChange(res) {
let arr = [];
let classUpload = [];
res.forEach((item) => {
console.log("遍历-------", item);
if (item.type === "class") {
//只将班级的放进去
arr.push(...item.studentId);//将所有学生id展开保存到arr中
}
});
this.permissionIds = arr;//在data中用一个变量接收
},
searchStu() {
this.stuInfoData = [];//先将当前学生数据清空
for (let i = 0; i < this.permissionIds.length; i++) {
this.sendMessage(this.permissionIds[i]);//发送请求
}
},