vue中element组织机构树形组件(页面加载就渲染)


 

template:

<el-tree  :data="TreeMenu" 
              :current-node-key="currentLivingId" 
              :props="{
                    label: 'orgName',
                    children: 'children'
                }" 
              ref="popularTree" lazy 
              :load="loadTreeMenuNode" 
               node-key="id" 
               @node-click="handleNodeClick" 
               highlight-current ></el-tree>
 
data:
TreeMenu: [],// 机构数据
currentLivingId: "",//默认的选中菜单值
 
methods:(通过父级id获取子级)
cscpOrgsAll() { // 获取动态机构树菜单
            return new Promise((resolve) => {
                 this.$api.cscpOrgsAll(this.queryCscpOrgsAll).then((res) => {//调接口渲染树形菜单数据
                    let data = res.data || {};
                    let cscpOrgDTOs = data.cscpOrgDTOs || [];
                    resolve(cscpOrgDTOs);
                })
            })
 },
 
loadTreeMenuNode(node, resolve) { // 懒加载子级数据
            if (node && node.key) {
                this.queryCscpOrgsAll.parentId = node.key;
                this.cscpOrgsAll().then((data) => {
                    resolve(data);
                })
            }
        },
 
handleNodeClick(node) { // 选择某个node节点
                this.orgId = node.id;//选择的id
                this.ApprovalList();//调接口(要渲染的对应的id数据)
},
 
 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM