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数据）

}，