//template部分
<el-table
ref="schoolTable"
:data="schoolList"
border
:row-key="onlyId"//指定唯一的key值
style="width: 100%"
class="margin-bottom-20"
v-loading="schoolListLoading"
lazy//懒加载这个也要配置
:load="loadTable"//懒加载 点击上一级加载下一级
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"//必写属性
:row-class-name="tableRowClassName"
>
<el-table-column align="center" prop="schCategoryName" label="等级">
<template slot-scope="scope">
<span v-if="scope.row.schCategoryName">学校</span>
<span v-else-if="scope.row.gradeName">年级</span>
<span v-else>班级</span>
</template>
</el-table-column>
</el-table>
//script部分
<script>
data () {
return {
schoolList: [],
schClassList:[],
}
},
methods:{
onlyId (val) {
return val.id + 'only'
},
created () {
this.getSchoolInfo();
},
getSchoolInfo () {
this.schoolListLoading = true;
this.listQuery.newUserId = this.userId || this.userInfo.id;
this.listQuery.regionCode = this.regionId;
getDataAll("schoolInfo/selectSchoolInfoByUserId", this.listQuery)
.then(res => {
this.schoolListLoading = false;
if (res.data.resultCode === 200) {
this.schoolList = res.data.resultContent.list;
this.schoolList.map(i => {
i.hasChildren = true;
});
this.total = res.data.resultContent.total;
} else {
this.$message({ message: res.data.resultMsg, type: "error" });
}
}).catch(() => {
this.schoolListLoading = false;
this.$message({ message: "查询学校信息失败!", type: "error" });
});
},
},
// 表格数据加载
loadTable (tree, treeNode, resolve) {
this.tree = tree;
this.treeNode = treeNode;
this.resolve = resolve;
if (!this.treeIds.includes(tree.id)) {
this.treeIds.push(tree.id);
}
// 点击学校
if (treeNode.level === 0) {
this.schGradeList = []
getDataAll("schoolGrade/selectGradeById", {
schoolId: tree.id,//请求数据的参数根据自己的情况来
userId: this.userInfo.id,
pageNum: 1,
pageSize: 100
}).then(res => {
let data = [];
if (res.data.resultCode === 200) {
this.gradeId = tree.id; // 学校id
data = res.data.resultContent.list;
data.map((i, index) => {
// 加一个字符串 只是每一级的字符串不能是一样的就可以了
//比如学校加schoolkey 年级加gradekey 班级加classkey
//如果id重复 他会把当前的id当成父id再去请求下一级
this.schGradeList.push(i.id)
i.hasChildren = true;
i.isLevelUp = 1;
if (i.id == tree.id) {
return data.splice(index, 1);
}
});
} else {
this.$message({ message: res.data.resultMsg, type: "error" });
}
resolve(data);
}).catch(() => {
this.$message({ message: "查询年级失败!", type: "error" });
resolve([]);
});
}
// 点击年级
else if (treeNode.level === "") {
this.schClassList = []
getDataAll("schoolClass/selectClassById", {
classGradeId: tree.id,
userId: this.userInfo.id,
pageNum: 1,
pageSize: 100
}).then(res => {
let data = [];
if (res.data.resultCode === 200) {
this.classId = tree.id; // 年级id
data = res.data.resultContent.list;
data.map((i, index) => {
this.schClassList.push(i.id)
return data[index].id += "key"
//可以加一个key字符串 可以保证id不会跟上级的id一样,如果后面要用到这个id作为参数
// 那就把这个字符串截取掉((数据id).toString().replace("key",""))就可以了,template差值表达式里也可以这么写
});
} else {
this.$message({ message: res.data.resultMsg, type: "error" });
}
resolve(data);
})
.catch((err) => {
this.$message({ message: "查询班级失败!", type: "error" });
resolve([]);
});
} else {
resolve([]);
}
}
</script>
04-21
1万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-25
248
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交