这两天 一直在研究 Treeselect
从后台获取到数据 然后放入treeselect中
Controller:
/**
* 获取树结构数据
*
* @param excludeCode 排除的Code
* @param isShowCode 是否显示编码(true or 1:显示在左侧;2:显示在右侧;false or null:不显示)
* @return
*/
@RequestMapping(value = "officeListData")
@ResponseBody
public List<Map<String, Object>> officeListData(String excludeCode, String isShowCode) {
List<Map<String, Object>> mapList = ListUtils.newArrayList();
List<Office> list = officeService.findList(new Office());
for (int i = 0; i < list.size(); i++) {
Office e = list.get(i);
// 过滤非正常的数据
if (!Office.STATUS_NORMAL.equals(e.getStatus())) {
continue;
}
// 过滤被排除的编码(包括所有子级)
if (StringUtils.isNotBlank(excludeCode)) {
if (e.getId().equals(excludeCode)) {
continue;
}
if (e.getParentCodes().contains("," + excludeCode + ",")) {
continue;
}
}
Map<String, Object> map = MapUtils.newHashMap();
map.put("id", e.getId());
map.put("pId", e.getParentCode());
map.put("label", StringUtils.getTreeNodeName(isShowCode, e.getOfficeCode(), e.getOfficeName()));
mapList.add(map);
}
return mapList;
}
前台的话 我是参考的https://www.cnblogs.com/dongyuxin/p/9429362.html#4095727 并对其做了修改
前台:
<el-form-item label="fdeptid" prop="fdeptid">
<treeselect v-model="value" :multiple="false" :options="options" />
</el-tree>
data() {
return {
value: null,
options: [{}],
};
},
//获取部门详细信息
this.$http.get('/f/dictData/officeListData').then(function(res){
alert(JSON.stringify(res.body));
this.options = this.toTreeData(res.body);
})
toTreeData(data,id,pid,name) {
// 建立个树形结构,需要定义个最顶层的父节点,pId是1
let parent = [];
for (let i = 0; i < data.length; i++) {
if(data[i].pId !== "0"){
}else{
let obj = {
label: data[i].label,
id: data[i].id,
children: []
};
parent.push(obj);//数组加数组值
}
}
children(parent);
// 调用子节点方法,参数为父节点的数组
function children(parent) {
if (data.length !== 0) {
for (let i = 0; i < parent.length; i++) {
for (let j = 0; j < data.length; j++) {
if (parent[i].id == data[j].pId){
let obj = {
label: data[j].label,
id: data[j].id,
children: []
};
parent[i].children.push(obj);
}
}
children(parent[i].children);
}
}
}
return parent;
}