How to implement a Tree Control in Element

How to implement a tree control in Element? I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

1. Front-end layout Search for New Vue ({el:'# home' Data: {bkTopoData: [{bk_inst_name: 'level 1', child: [{bk_inst_name: 'level 1-1' Child: [{bk_inst_name: 'level 3 1-1-1'}]} ]} {bk_inst_name: 'level 2', child: [{bk_inst_name: 'level 2-1' Child: [{bk_inst_name: 'level 3 2-1-1'}]} {bk_inst_name: 'level 2-2' Child: [{bk_inst_name: 'level 3 2-2-1'}]} ]} {bk_inst_name: 'level 3, child: [{bk_inst_name:' level 3-1' Child: [{bk_inst_name: 'level 3-1-1'}]} {bk_inst_name: 'level 2 3-2' Child: [{bk_inst_name: 'level 3-2-1'}]} ]}] SetProps: {children: 'child', label:' bk_inst_name'}, searchBkId:'', searchContent:'', bkBizData: [], tableData: [], hostData: []} Mounted () {this.init ()}, methods: {init () {axios.get (site_url + "get_biz_list/") .then (res = > {if (res.data.result) {this.bkBizData = res.data.data) } else {this.$message.error ('failed to acquire business');}}, 'json') }, handleNodeClick (data) {axios.post (site_url + "search_host/", data) .then (res = > {if (res.data.result) {this.hostData = res.data.data) } else {this.$message.error ('failed to acquire host');}}, 'json') }, bizChange () {axios.get (site_url + "get_bk_topo/?bk_biz_id=" + this.searchBkId) .then (res = > {if (res.data.result) {this.bkTopoData = res.data.data) } else {this.$message.error ('failed to acquire business');}}, 'json') }, search () {console.log ("aaa")}}) / * table header and table data center CSS * / .el-table .cell {text-align: center;} 2. Backend interface from django.views.decorators.csrf import csrf_exemptdef get_bk_topo (request): bk_biz_id = request.GET.get ("bk_biz_id") res_data = cc_search_biz_inst_topo (request, bk_biz_id) return JsonResponse ({"result": True, "data": res_data}) def get_biz_list (request): fields = ["bk_biz_id" "bk_biz_name"] data = cc_search_business (fields) return JsonResponse ({"result": True, "data": data}) def search_host (request): res_data = [] data = json.loads (request.body) bk_obj_id = data.get ("bk_obj_id") bk_inst_id = data.get ("bk_inst_id") host_data = cc_search_host (request, bk_obj_id Bk_inst_id) for h in host_data: bk_host_name = h.get ("host", {}). Get ("bk_host_name") bk_os_name = h.get ("host", {}). Get ("bk_os_name") bk_cloud_id = h.get ("host") {}) .get ("bk_cloud_id") [0] .get ("bk_inst_id") bk_cloud_name = h.get ("host", {}). Get ("bk_cloud_id") [0] .get ("bk_inst_name") bk_host_id = h.get ("host", {}). Get ("bk_host_id") bk_host_innerip = h.get ("host") Get ("bk_host_innerip") res_data.append ({"bk_host_name": bk_host_name, "bk_os_name": bk_os_name, "bk_cloud_id": bk_cloud_id, "bk_cloud_name": bk_cloud_name, "bk_host_id": bk_host_id "bk_host_innerip": bk_host_innerip,}) return JsonResponse ({"result": True, "data": res_data})

Realize the effect

After reading the above, have you mastered how to implement a tree control in Element? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!