前台实现下拉树形-Treeselect

这两天 一直在研究 Treeselect

从后台获取到数据 然后放入treeselect中

Controller:

/**
     * 获取树结构数据
     *
     * @param excludeCode 排除的Code
     * @param isShowCode 是否显示编码(true or 1:显示在左侧;2:显示在右侧;false or null:不显示)
     * @return
     */
    @RequestMapping(value = "officeListData")
    @ResponseBody
    public List> officeListData(String excludeCode, String isShowCode) {
        List> mapList = ListUtils.newArrayList();
        List 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 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 并对其做了修改

前台:

 
  
		     
		  


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;
	    	  }

 

你可能感兴趣的:(前端)