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