vue+antdesign 樹形組件的使用


vue+antdesign 樹形組件的使用

以下是模擬數據

{

"Body": [

{

"ID": 1,

"DeptName": "深圳有限公司",

"ParentID": null,

"IsUse": 0,

"DLevel": 1,

"DSort": 1

},

{

"ID": 2,

"DeptName": "外教網",

"ParentID": 1,

"IsUse": 0,

"DLevel": 2,

"DSort": 1

},

{

"ID": 3,

"DeptName": "大市場",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 1

},

{

"ID": 4,

"DeptName": "銷售部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 2

},

{

"ID": 5,

"DeptName": "服務部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 3

},

{

"ID": 6,

"DeptName": "行政人力資源中心",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 4

},

{

"ID": 7,

"DeptName": "設計策劃部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 5

},

{

"ID": 8,

"DeptName": "投資部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 6

},

{

"ID": 9,

"DeptName": "財務部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 7

},

{

"ID": 10,

"DeptName": "品牌部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 8

},

{

"ID": 11,

"DeptName": "風險控制部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 9

},

{

"ID": 12,

"DeptName": "網絡管理",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 10

},

{

"ID": 13,

"DeptName": "總經辦",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 11

},

{

"ID": 14,

"DeptName": "學校雙師事業部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 12

},

{

"ID": 15,

"DeptName": "盒子",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 13

},

{

"ID": 16,

"DeptName": "品牌戰略部",

"ParentID": 2,

"IsUse": 0,

"DLevel": 3,

"DSort": 14

},

{

"ID": 17,

"DeptName": "大市場管理部",

"ParentID": 3,

"IsUse": 0,

"DLevel": 4,

"DSort": 1

},

{

"ID": 18,

"DeptName": "推廣中心",

"ParentID": 3,

"IsUse": 0,

"DLevel": 4,

"DSort": 2

},

{

"ID": 19,

"DeptName": "品牌執行中心",

"ParentID": 3,

"IsUse": 0,

"DLevel": 4,

"DSort": 3

},

{

"ID": 20,

"DeptName": "用戶運營中心",

"ParentID": 3,

"IsUse": 0,

"DLevel": 4,

"DSort": 4

},

{

"ID": 21,

"DeptName": "銷售一部",

"ParentID": 4,

"IsUse": 0,

"DLevel": 4,

"DSort": 1

},

{

"ID": 22,

"DeptName": "銷售二部",

"ParentID": 4,

"IsUse": 0,

"DLevel": 4,

"DSort": 2

},

{

"ID": 23,

"DeptName": "銷售部管理組",

"ParentID": 4,

"IsUse": 0,

"DLevel": 4,

"DSort": 3

},

{

"ID": 24,

"DeptName": "教師管理部",

"ParentID": 5,

"IsUse": 0,

"DLevel": 4,

"DSort": 1

},

{

"ID": 25,

"DeptName": "課程開發部",

"ParentID": 5,

"IsUse": 0,

"DLevel": 4,

"DSort": 2

},

{

"ID": 26,

"DeptName": "IT",

"ParentID": 5,

"IsUse": 0,

"DLevel": 4,

"DSort": 3

},

{

"ID": 27,

"DeptName": "客服部",

"ParentID": 5,

"IsUse": 0,

"DLevel": 4,

"DSort": 4

},

{

"ID": 28,

"DeptName": "班主任",

"ParentID": 5,

"IsUse": 0,

"DLevel": 4,

"DSort": 5

},

{

"ID": 29,

"DeptName": "投訴部",

"ParentID": 5,

"IsUse": 0,

"DLevel": 4,

"DSort": 6

},

{

"ID": 30,

"DeptName": "語言研究院",

"ParentID": 5,

"IsUse": 0,

"DLevel": 4,

"DSort": 7

},

{

"ID": 31,

"DeptName": "人力資源部",

"ParentID": 6,

"IsUse": 0,

"DLevel": 4,

"DSort": 1

},

{

"ID": 32,

"DeptName": "行政部",

"ParentID": 6,

"IsUse": 0,

"DLevel": 4,

"DSort": 2

},

{

"ID": 33,

"DeptName": "設計組",

"ParentID": 7,

"IsUse": 0,

"DLevel": 4,

"DSort": 1

},

{

"ID": 34,

"DeptName": "策劃組",

"ParentID": 7,

"IsUse": 0,

"DLevel": 4,

"DSort": 2

},

{

"ID": 35,

"DeptName": "UGD TEAM",

"ParentID": 7,

"IsUse": 0,

"DLevel": 4,

"DSort": 3

},

{

"ID": 38,

"DeptName": "as",

"ParentID": 0,

"IsUse": 0,

"DLevel": 0,

"DSort": 0

},

{

"ID": 39,

"DeptName": "阿薩斯",

"ParentID": 0,

"IsUse": 0,

"DLevel": 0,

"DSort": 0

},

{

"ID": 40,

"DeptName": "asas",

"ParentID": 0,

"IsUse": 0,

"DLevel": 0,

"DSort": 0

}

],

"ErrorCode": 0,

"Msg": ""

}

以下是部分代碼,僅作為自己記錄使用:

vue+antdesign 樹形組件的使用

很久不看vue後初次上手試試


分享到:


相關文章: