Element中怎么实现一个树形控件，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
1.前端布局
<div id="home" >
<el-row>
<el-col :span="8">
<el-form label-width="100px">
<el-form-item label="选择业务">
<el-select v-model="searchBkId" @change="bizChange">
<el-option v-for="item in bkBizData" :label="item.bk_biz_name" :value="item.bk_biz_id"></el-option>
</el-select>
</el-form-item>
<el-tree :data="bkTopoData" :props="setProps" @node-click="handleNodeClick" ></el-tree>
</el-form>
</el-col>
<el-col :span="16">
<el-form label-width="100px" >
<el-form-item label="搜索字段">
<el-row :gutter="60">
<el-col :span="16">
<el-input v-model="searchContent" placeholder="请输入搜索字段"></el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="search">搜索</el-button>
</el-col>
</el-row>
</el-form-item>
<el-table :data="hostData" border width="100%" max-height="300" header-align="center">
<el-table-column prop="bk_host_id" label="主机ID"></el-table-column>
<el-table-column prop="bk_os_name" label="系统名"></el-table-column>
<el-table-column prop="bk_host_name" label="主机名称"></el-table-column>
<el-table-column prop="bk_host_innerip" label="IP地址"></el-table-column>
<el-table-column prop="bk_cloud_id" label="云区域ID"></el-table-column>
<el-table-column prop="bk_cloud_name" label="云区域名称"></el-table-column>
</el-table>
<el-divider></el-divider>
<el-table :data="hostData" border >
<el-table-column prop="bk_host_id" label="主机ID"></el-table-column>
<el-table-column prop="bk_os_name" label="系统名"></el-table-column>
<el-table-column prop="bk_host_name" label="主机名称"></el-table-column>
<el-table-column prop="bk_host_innerip" label="IP地址"></el-table-column>
<el-table-column prop="bk_cloud_id" label="云区域ID"></el-table-column>
<el-table-column prop="bk_cloud_name" label="云区域名称"></el-table-column>
</el-table>
</el-form>
</el-col>
</el-row>
</div>
<script type="text/javascript">
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")
}
}
})
</script>
<style>
/* table表头及表内数据居中CSS */
.el-table .cell {
text-align: center;
}
</style>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中怎么实现一个树形控件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注天达云行业资讯频道，感谢各位的阅读！