溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Element中怎么實現一個樹形控件，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
<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>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中怎么實現一個樹形控件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
