Element中怎么實(shí)現(xiàn)一個(gè)樹(shù)形控件

Element中怎么實(shí)現(xiàn)一個(gè)樹(shù)形控件，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

1.前端布局

<div id="home" >
    <el-row>
        <el-col :span="8">
            <el-form label-width="100px">
                <el-form-item label="選擇業(yè)務(wù)">
                    <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="請(qǐng)輸入搜索字段"></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="主機(jī)ID"></el-table-column>
                  <el-table-column prop="bk_os_name" label="系統(tǒng)名"></el-table-column>
                  <el-table-column prop="bk_host_name" label="主機(jī)名稱(chēng)"></el-table-column>
                  <el-table-column prop="bk_host_innerip" label="IP地址"></el-table-column>
                  <el-table-column prop="bk_cloud_id" label="云區(qū)域ID"></el-table-column>
                  <el-table-column prop="bk_cloud_name" label="云區(qū)域名稱(chēng)"></el-table-column>
                </el-table>
                <el-divider></el-divider>
                <el-table :data="hostData" border >
                  <el-table-column prop="bk_host_id" label="主機(jī)ID"></el-table-column>
                  <el-table-column prop="bk_os_name" label="系統(tǒng)名"></el-table-column>
                  <el-table-column prop="bk_host_name" label="主機(jī)名稱(chēng)"></el-table-column>
                  <el-table-column prop="bk_host_innerip" label="IP地址"></el-table-column>
                  <el-table-column prop="bk_cloud_id" label="云區(qū)域ID"></el-table-column>
                  <el-table-column prop="bk_cloud_name" label="云區(qū)域名稱(chēng)"></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: '一級(jí) 1',
                    child: [
                        {
                            bk_inst_name: '二級(jí) 1-1',
                            child: [
                                {
                                    bk_inst_name: '三級(jí) 1-1-1'
                                }
                            ]
                        }
                    ]
                },
                {
                    bk_inst_name: '一級(jí) 2',
                    child: [
                        {
                            bk_inst_name: '二級(jí) 2-1',
                            child: [
                                {
                                    bk_inst_name: '三級(jí) 2-1-1'
                                }
                            ]
                        },
                        {
                            bk_inst_name: '二級(jí) 2-2',
                            child: [
                                {
                                    bk_inst_name: '三級(jí) 2-2-1'
                                }
                            ]
                        }
                    ]
                },
                {
                    bk_inst_name: '一級(jí) 3',
                    child: [
                        {
                            bk_inst_name: '二級(jí) 3-1',
                            child: [
                                {
                                    bk_inst_name: '三級(jí) 3-1-1'
                                }
                            ]
                        },
                        {
                            bk_inst_name: '二級(jí) 3-2',
                            child: [
                                {
                                    bk_inst_name: '三級(jí) 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('獲取業(yè)務(wù)失敗');
                    }
                },'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('獲取主機(jī)失敗');
                    }
                }, '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('獲取業(yè)務(wù)失敗');
                    }
                },'json');
            },
            search() {
                console.log("aaa")
            }
        }
    })
</script>
<style>
/* table表頭及表內(nèi)數(shù)據(jù)居中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})

實(shí)現(xiàn)效果

看完上述內(nèi)容，你們掌握Element中怎么實(shí)現(xiàn)一個(gè)樹(shù)形控件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！