new Vue({
el: '#home',
data: {
bkTopoData: [
{
bk_inst_name: '一级 1',
child: [
{
bk_inst_name: '二级 1-1',
child: [
{
bk_inst_name: '三级 1-1-1'
}
]
}
]
},
{
bk_inst_name: '一级 2',
child: [
{
bk_inst_name: '二级 2-1',
child: [
{
bk_inst_name: '三级 2-1-1'
}
]
},
{
bk_inst_name: '二级 2-2',
child: [
{
bk_inst_name: '三级 2-2-1'
}
]
}
]
},
{
bk_inst_name: '一级 3',
child: [
{
bk_inst_name: '二级 3-1',
child: [
{
bk_inst_name: '三级 3-1-1'
}
]
},
{
bk_inst_name: '二级 3-2',
child: [
{
bk_inst_name: '三级 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('获取业务失败');
}
},'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('获取主机失败');
}
}, '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('获取业务失败');
}
},'json');
},
search() {
console.log("aaa")
}
}
})
2.后端接口
from django.views.decorators.csrf import csrf_exempt
def 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})实现效果
看完上述内容，你们掌握Element中怎么实现一个树形控件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
网站标题：Element中怎么实现一个树形控件
转载注明：http://cxhlcq.com/article/jgeocg.html
重庆分公司
重庆分公司
