element 机构树的组装

public AjaxResult deptList() {
        List<ElementTreeData> elementTreeData=new ArrayList<>();

        Jgxx jgxx = new Jgxx();
        if(getSysUser().getDeptId() == null){
            jgxx.setDeptId(530000000000L);
        }
        // 无上级机构
        ElementTreeData none=new ElementTreeData();
        none.setId(530000000000L);
        none.setLabel("无上级机构");
        elementTreeData.add(none);
        // 其他结构树
        List<Jgxx> list = jgxxService.selectJgxxListAllWidthParents(jgxx);
        // 去掉自己的机构
        List<Jgxx> listNotMine = new ArrayList<>();
        for(Jgxx jg : list){
            List<String> ancestors = Arrays.asList(jg.getAncestors().split(","));
            if(jg.getId().longValue() == getSysUser().getDeptId().longValue() || ancestors.contains(getSysUser().getDeptId().toString())){
                continue;
            }
            listNotMine.add(jg);
        }
        // 重构为 elementTreeData
        for(Jgxx jg : listNotMine){
            if(jg.getJgLevel() == 1){
                ElementTreeData father=new ElementTreeData();
                father.setId(jg.getId());
                father.setLabel(jg.getJgName());
                findChildDept(list, father);
                elementTreeData.add(father);
            }
        }
        return AjaxResult.success(elementTreeData);
    }

    private void findChildDept(List<Jgxx> list, ElementTreeData data){
     for (Jgxx jgxx:list){
         if (jgxx.getParentid().toString().equals(data.getId().toString())){
            ElementTreeData elementTreeData=new ElementTreeData();
            elementTreeData.setId(jgxx.getId());
            elementTreeData.setLabel(jgxx.getJgName());
            data.addChild(elementTreeData);
            findChildDept(list, elementTreeData);
         }
     }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui提供了一个形控件,可以在前端页面展示状结构的数据。您可以通过以下步骤来使用element形控件: 1. 首先,在您的项目中安装并引入element-ui库。可以使用npm或yarn进行安装: ``` npm install element-ui ``` 然后在需要使用形控件的文件中引入element-ui: ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 2. 创建一个形控件的数据源,通常是一个数组对象,每个对象代表一个节点,其中包含了节点的唯一标识符、显示文本、子节点等信息。 3. 在Vue组件中使用el-tree标签,并绑定数据源和其他属性: ```html <el-tree :data="treeData" :props="defaultProps"></el-tree> ``` 其中,`:data`属性绑定了您创建的数据源,`:props`属性可以配置节点的字段名,如"id"、"label"等。 4. 如果需要处理节点的选择事件或展开/折叠事件,可以通过监听el-tree组件的相关事件来实现: ```html <el-tree @node-click="handleNodeClick" @node-expand="handleNodeExpand" :data="treeData" :props="defaultProps"></el-tree> ``` 在Vue组件的methods中定义事件处理函数即可: ```javascript methods: { handleNodeClick(data) { console.log(data); }, handleNodeExpand(data, node, instance) { console.log(data); } } ``` 以上就是使用element-ui的形控件的基本步骤,您可以根据实际需求进行进一步的样式和功能定制。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值