tree自己提供的搜索，只能搜索加载好的数据，不符合我们这边的需求，这边换了一种思路，就是在搜索的时候，换成普通的 tree 当输入框是空的时候在换回之前懒加载的 tree，代码如下：
<el-input placeholder="输入控制指令名称" size="mini" v-model="filterText" @input="filterNode"></el-input>
<el-tree
class="filter-tree"
:props="propsOne"
:load="loadNode"
lazy
node-key="key"
highlight-current
:expand-on-click-node="false"
ref="tree"
v-show="tree_tree_no_lazy == 1"
> </el-tree>
<!-- 普通的数 -->
<el-tree
class="filter-tree"
:props="propsOne"
:data="treeData"
:default-expand-all="true"
highlight-current
:expand-on-click-node="false"
ref="tree_no_lazy"
v-show="tree_tree_no_lazy == 2"
></el-tree>
data() {
return {
propsOne: {
label: 'name',
children: 'children',
isLeaf: 'leaf'
},
treeData: [],
tree_tree_no_lazy: 1,
filterText: '',
}
},
methods: {
//这个根据自己业务改代码
async loadNode(node, resolve) {
let arr = []
if (node.level <= 1) {
listTree({ 'name': node.data == undefined ? null : node.data.name, 'tier': node.level }).then(response => {
response.data.map(function(value) {
let Json = null
if (node.level == 1) {
let v = value.split('&')
Json = { key: v[1] + '-' + v[0], 'subSystem': v[0], 'name': v[1], 'leaf': false }
} else {
Json = { key: value, 'name': value, 'leaf': false }
}
arr.push(Json)
})
resolve(arr)
})
} else {
listLists({ orderType: node.data.name, subSystem: node.data.subSystem }).then(response => {
response.data.map(function(value) {
arr.push({
'key': value.subSystem + '-' + value.orderType + '-' + value.orderName,
'name': value.orderName,
'id': value.id,
'leaf': true
})
})
resolve(arr)
})
}
},
},
/*当输入框变化时触发的方法*/
filterNode() {
let val = this.filterText.trim()
if (!val) {
this.tree_tree_no_lazy = 1
} else {
this.tree_tree_no_lazy = 2
this.locNode_search()
}
},
//搜索数据的方法
locNode_search() {
locNodeSearch({ search: this.filterText.trim() }).then(row => {
if (row.code === 200) {
let map = row.data
let arr = []
if (map != null) {
for (let subSystemStr in map) {
let Json = {}
Json['key'] = subSystemStr
Json['name'] = subSystemStr
Json['leaf'] = false
Json['children'] = []
let subSystem = map[subSystemStr]
for (let orderTypeStr in subSystem) {
let Json2 = {}
Json2['key'] = subSystemStr + '-' + orderTypeStr
Json2['name'] = orderTypeStr
Json2['subSystem'] = subSystemStr
Json2['leaf'] = false
Json2['children'] = []
Json['children'].push(Json2)
let orderType = subSystem[orderTypeStr]
for (let i = 0; i < orderType.length; i++) {
let Json3 = {}
let key = subSystemStr + '-' + orderTypeStr + '-' + orderType[i].orderName
Json3['key'] = key
Json3['name'] = orderType[i].orderName
Json3['id'] = orderType[i].id
Json3['leaf'] = true
Json2['children'].push(Json3)
}
}
arr.push(Json)
}
}
this.treeData = arr
}
})
},
后端
/**
* 搜索
*/
@GetMapping("/locNodeSearch")
public AjaxResult locNodeSearch(@RequestParam("search") String Search) {
return AjaxResult.success(ykOrderUserListService.locNodeSearch(Search));
}
/**
* 树结构搜索
* @param search
* @return
*/
@Override
public Map<String, Map<String, List<YkOrderUserList>>> locNodeSearch(String search) {
Long userId = SecurityUtils.getUserId();
YkOrderUserList youl = new YkOrderUserList();
youl.setUserId(userId);
youl.setOrderType(search);
//查询 指令类别
List<YkOrderUserList> orderTypes = this.selectYkOrderUserListList(youl);
youl.setOrderType(null);
youl.setOrderName(search);
//查询 指令名称
List<YkOrderUserList> orderNames = this.selectYkOrderUserListList(youl);
orderTypes.addAll(orderNames);
if (ObjectUtil.isEmpty(orderTypes)) return null;
//获取第一层数据。
Map<String, List<YkOrderUserList>> orderType_maps
//过滤掉重复数据
= orderTypes.stream().collect(Collectors.toMap(
(e) -> e.getId(),
(e) -> e,
(e1, e2) -> e2,
HashMap::new
)).values()
//分组
.stream()
.collect(Collectors.groupingBy(
(e) -> e.getSubSystem()
));
//树结构
Map<String, Map<String, List<YkOrderUserList>>> tree_map = new HashMap<>();
//获取树结构
orderType_maps.forEach((k, v) -> {
//二级分组
Map<String, List<YkOrderUserList>> orderType_map = v.stream().collect(Collectors.groupingBy((e) -> e.getOrderType()));
tree_map.put(k, orderType_map);
});
return tree_map;
}
