官网地址学习地址:传送阵
下面是 html代码
/*这个是输入框 模糊查询的,但在懒加载 模式下,
显得有些鸡肋,因为,这个搜索是只能查找到,已经显示在页面的数据
*/
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"> //定义一个属性监听表单变化
</el-input>
/*
讲几个比较重要的
下面就是 树状结构的 load这个属性是当你点击下级,就会触发loadNode方法,
有两个参数,控制台打印一下就知道了,
:filter-node-method 这个是开启 上面那个查询的
lazy 这个是开启 懒加载的
highlight-current 这个是鼠标停留高亮,鼠标停留,会变颜色,我用的默认的,
应该还可以自定义
:props="props" 这个属性是定义树形结构每一行的属性,要在data中设置
*/
<el-tree
class="filter-tree"
:props="props"
:load="loadNode"
lazy
:filter-node-method="filterNode"
highlight-current
ref="tree"
>
下面是vue代码
/*
讲几个,比较重要的
filterText 监听用的 对应的是 v-model="filterText"搜索框
props 这个比较重要里面有几个属性
label:等于树形结构每一个,标签的文本名字可以随便第一,可以根据后端字段改变
children 这个树形结构的数组
isLeaf 是否开启可以点击,加载下一页,leaf=true的时候,点击就不会加载数据
*/
data() {
return {
filterText:'',
props: {
label: 'name',
children: 'zones',
isLeaf: 'leaf',
},
}
},
//搜索使用
watch: {
filterText(val) {
//将数据放入 过滤器中
this.$refs.tree.filter(val);
}
},
methods: {
//这个方法 页面打开默认tree没有数据,就会加载数据 node.level===0,就代表第一次加载
loadNode(node, resolve) {
//如果是第一次加载,返回自己的数据
if (node.level === 0) {
getSpread({uid:this.form.uid,status:1}).then(res=>{
if(res[0].leaf == "true"){
//等于true 关闭 可以点击下一页
return resolve([{name:res[0].name,id:res[0].id,leaf:true}]);
}else{
return resolve([{name:res[0].name,id:res[0].id}]);
}
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
}else{
//加载下级数据
getSpread({uid:node.data.id,status:2}).then(res=>{
let arr = [];
res.map(function(vlaue){
if(vlaue.leaf == "true"){
let json1 = {name:'',id:'',leaf:true};
json1['name'] = vlaue.name;
json1['id'] = vlaue.id;
arr.push(json1);
}else{
let json2 = {name:'',id:''};
json2['name'] = vlaue.name;
json2['id'] = vlaue.id;
arr.push(json2);
}
})
return resolve(arr);
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
}
},
//搜索方法
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
为了直观后端代码也放部分
/**
* 获取用户自己的数据和下级人数
*
* @param uid 这个用户的id
* @param status 是查询用户自己的数据还是,他的下级数据 ,1自己数据,2下级数据
* @return
*/
@Override
public List<Map<String,String>> getOneself(Long uid,String status) {
/*获取用户所在分组的所有数据*/
Map<Long, YxUser> grouping = getGrouping(uid);
/*会员等级数据*/
Map<Integer, YxSystemUserLevel> levelMap = yxSystemUserLevelService.queryAll(new YxSystemUserLevelQueryCriteria())
.stream().collect(Collectors.toMap(
(e) -> e.getGrade(),
(e) -> e,
(e1, e2) -> e1
));
/*用户查询用户下级的人数*/
Map<Long, List<Long>> collect = grouping.entrySet().stream().map((e) -> e.getValue())
.collect(Collectors.groupingBy(
(e) -> Long.valueOf(e.getPartnerId()),
Collectors.mapping(
(e) -> e.getUid(),
Collectors.toList()
)
));
/*返回的数据存储盒子*/
List<Map<String,String>> listMap = new ArrayList<>();
/*得到用户自己的数据*/
YxUser yxUser = grouping.get(uid);
/*拼接数据*/
StringBuffer buffer = new StringBuffer();
HashMap<String, String> map = null;
/*参数等于1返回用户自己的数据*/
if ("1".equals(status)){
/*得到用户下级的数量*/
Integer integer = queryNumber(collect, uid);
map = new HashMap<>();
map.put("id", String.valueOf(yxUser.getUid()));
buffer.append("名称:" + yxUser.getUsername());
buffer.append(" - ");
buffer.append("用户等级:" + levelMap.get(yxUser.getLevel()).getName());
buffer.append(" - ");
buffer.append("用户电话:" + yxUser.getPhone());
buffer.append(" - ");
buffer.append("团队人数:" + integer);
map.put("name", buffer.toString());
/*如果用户没有下级,前端就不显示 加载 下级数据*/
if (integer.equals(0)) {
map.put("leaf", "true");
}else{
map.put("leaf", "false");
}
listMap.add(map);
return listMap;
}
/*=======如果上面没有返回证明是要查找下级的数据=======*/
/*获取这个用户下级人员 的id*/
List<Long> longs = collect.get(uid);
longs.forEach((e) -> {
HashMap<String, String> longsMap = new HashMap<>();
/*得到用户下级的数量*/
Integer integer = queryNumber(collect,e);
/**/
buffer.append("名称:" + grouping.get(e).getUsername());
buffer.append(" - ");
buffer.append("用户等级:" + levelMap.get(grouping.get(e).getLevel()).getName());
buffer.append(" - ");
buffer.append("用户电话:" + grouping.get(e).getPhone());
buffer.append(" - ");
buffer.append("团队人数:" + integer);
longsMap.put("name", buffer.toString());
/*用户id*/
longsMap.put("id", String.valueOf(e));
/*如果用户没有下级,前端就不显示 加载 下级数据*/
if (integer.equals(0)) {
longsMap.put("leaf", "true");
}else{
longsMap.put("leaf", "false");
}
listMap.add(longsMap);
/*清空原有的数据*/
buffer.delete(0,buffer.length());
});
return listMap;
}
最后的效果
好了到这里就完了,希望对你有帮助。