前台实现下拉树形-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;
    }

前台的话 我是参考的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;
	    	  }

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值