Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能案例分析-創(chuàng)新互聯(lián)

大家好！先上圖看看本次案例的整體效果。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的宜良網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

**浪奔，浪流，萬里濤濤江水永不休。如果在jq時代來實這個功能簡直有些噩夢了，但是自從前端思想發(fā)展到現(xiàn)在的以MVVM為主流的大背景下，來實現(xiàn)一個這樣繁雜的功能簡直不能容易太多。下面就手把手帶您一步步撥開這個案例的層層迷霧。**

實現(xiàn)步驟如下：

1. api構(gòu)建部門和員工信息接口，vuex全局存放部門list和員工list數(shù)據(jù)信息。

api：

export default {
 getEmployeeList () {
  return {
   returncode: 0,
   message: '',
   result: [
    {
     id: 1,
     employeeName: '吳亦凡',
     departmentId: 44
    },
    {
     id: 2,
     employeeName: '鹿晗',
     departmentId: 45
    },
    {
     id: 3,
     employeeName: '孫紅雷',
     departmentId: 44
    },
    {
     id: 4,
     employeeName: '周杰倫',
     departmentId: 45
    },
    {
     id: 5,
     employeeName: '張國榮',
     departmentId: 45
    },
    {
     id: 6,
     employeeName: '陳百強',
     departmentId: 45
    },
    {
     id: 7,
     employeeName: '譚詠麟',
     departmentId: 41
    },
    {
     id: 8,
     employeeName: '谷村新司',
     departmentId: 45
    },
    {
     id: 9,
     employeeName: '中島美雪',
     departmentId: 46
    },
    {
     id: 10,
     employeeName: '周潤發(fā)',
     departmentId: 47
    },
    {
     id: 14,
     employeeName: '周慧敏',
     departmentId: 58
    },
    {
     id: 13,
     employeeName: '張學(xué)友',
     departmentId: 58
    }
   ]
  }
 },
 getDepartmentList () {
  return {
   returncode: 0,
   message: '',
   result: [
    {
     id: 40,
     name: '研發(fā)一部',
     parentId: 37,
     sequence: 2
    },
    {
     id: 41,
     name: '研發(fā)二部',
     parentId: 37,
     sequence: 4
    },
    {
     id: 43,
     name: '市場',
     parentId: 0,
     sequence: 6
    },
    {
     id: 44,
     name: '銷售',
     parentId: 0,
     sequence: 4
    },
    {
     id: 45,
     name: '財務(wù)',
     parentId: 0,
     sequence: 5
    },
    {
     id: 46,
     name: '研發(fā)三部',
     parentId: 37,
     sequence: 1
    },
    {
     id: 47,
     name: '研發(fā)四部',
     parentId: 37,
     sequence: 3
    },
    {
     id: 37,
     name: '研發(fā)',
     parentId: 0,
     sequence: 5
    },
    {
     id: 58,
     name: '研發(fā)一部',
     parentId: 57,
     sequence: 1
    },
    {
     id: 59,
     name: '測試',
     parentId: 0,
     sequence: 5
    },
    {
     id: 60,
     name: '測試一部',
     parentId: 59,
     sequence: 1
    },
    {
     id: 61,
     name: '測試二部',
     parentId: 59,
     sequence: 2
    },
    {
     id: 62,
     name: '研發(fā)二部',
     parentId: 57,
     sequence: 2
    }
   ]
  }
 }
}

新聞名稱：Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能案例分析-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article22/csjsjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、虛擬主機、網(wǎng)站建設(shè)、網(wǎng)站收錄、定制網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)