前台实现下拉树形-Treeselect
这两天 一直在研究 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; }
前台的话 我是参考的 并对其做了修改
前台:
<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; }