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后初次上手试试


分享到:


相關文章: