今天在項目中需要通過行政區域選擇，然后選擇該行政區域下面的景區，也就是要構建行政區劃、景區兩表數據表的樹。全國的行政區域到縣已經3500多了，再加上景區會有幾萬個點，這棵選擇樹不論是在后臺還是在前臺構建都比較大，會影響系統性能，需要前后端結合，動態構建，使用時用懶加載，提升系統性能。

一、后臺構建兩個表的數據選擇查詢功能
1、行政區域需要按省、市、縣的adcode和級別查詢，以便于動態構建。兩個參數，adcode后臺查詢時會將后面的0去掉匹配，級別如果0或空，查詢匹配下所有的，為數字只查本級。這里有兩個參數，用@requestParam傳遞的，注意要用post，前端VUE使用get傳遞時會報錯。

@PostMapping("/listjson" ) @ApiOperation("根據查詢條件獲取區劃清單") public AjaxResult listJson(@RequestParam(name="adcode", required = true) String adcode, @RequestParam(name="level",required = true) String level) { System.out.println(adcode); List> regionJson = iMapRegionService.selectRegionJson(adcode,level); return AjaxResult.success(regionJson); }}
2、查詢行政區域下的景區，根據adcode查詢，一個參數，參數放在路徑中傳遞的。

@GetMapping("/listByCode/{adcode}") @ApiOperation("根據查詢條件獲取景區清單") public AjaxResult listByCode(@PathVariable String adcode) { List> scenicList = iMapScenicService.selectScenicByCode(adcode); return AjaxResult.success(scenicList); }}
二、在VUE中引入Treeselect
由于后面要用懶加載，在引用Treeselect給件同時，還要引入LOAD_CHILDREN_OPTIONS，Treeselect要加到components中。

import { LOAD_CHILDREN_OPTIONS, Treeselect } from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default { components: { Treeselect }, data() { return { //地點列表 regionOptions: [],
三、使用Treeselect組件
noChildrenText="更新中..." , //由于缺省會將沒有加載下級節點的children設置為null，系統缺省會顯示No sub-options，點擊節點是，顯示更新中更好，更新完成顯示子節點。

:load-options="loadOptions" //增加此選項，在后方擴展子節點是會調用此方法，第一是點擊左邊的三解形，第二下面將非葉子節點設置為不能選擇，點擊節點也會自動擴展。

:disable-branch-nodes="true"> //將樹枝節點設置為不能選擇，樹枝節點是行政區域，也不我們需要的景區ID，所以不能選擇，否則數據會亂。

https://blog.csdn.net/wujize/article/details/106106416

四、構建初始的省級目錄
組件打開初始化時，構建一級選擇樹

created() { this.getList() this.getTreeselect() }, methods: { /** 生成查詢行政區劃下拉樹結構第一級 */ getTreeselect() { let formData = new FormData() //構建需要查詢的參數，先選擇省節點 formData.append('adcode', '000000') formData.append('level', '1') listJson(formData).then(response => { //listJson對應是詢后臺行政區域的接口函數 let data = response.data data.forEach(element => { element['id'] = element.code // 后臺傳遞過來的是code和name，需要換為treeselect所需要的id和label element['label'] = element.name element['level'] = '1' //設置為1級，后續判斷需要 element['children'] = null //要設置為空，才能觸發:load-options="loadOptions"動用 }) this.regionOptions = data }) },

五、構建動態生成的二、三、四級目錄
//動態添加樹的子節點 loadOptions({ action, parentNode, callback }) { if (action === LOAD_CHILDREN_OPTIONS) { let formData = new FormData() formData.append('adcode', parentNode.id) switch (parentNode.level) { //判斷選擇級別 case '1' : /** 生成查詢行政區劃下拉樹結構第二級 */ formData.append('level', '2') listJson(formData).then(res => { //選擇市，構建2級 if (res.code === 200) { //后臺返回是用code表示返回狀態代碼，與后臺匹配 let data = res.data data.forEach(element => { element['id'] = element.code element['label'] = element.name element['level'] = '2' element['children'] = null }) parentNode.children = data //增加子節點 } }) callback() break case '2' : /** 生成查詢行政區劃下拉樹結構第三級 */ formData.append('level', '3') listJson(formData).then(res => { if (res.code === 200) { let data = res.data data.forEach(element => { element['id'] = element.code element['label'] = element.name element['level'] = '3' element['children'] = null }) parentNode.children = data } }) callback() break case '3' : /** 生成查詢行政區下的景區清單 */ listByCode(parentNode.id).then(res => { //第四級是景區，使用的是景區表，根據adcode查詢 if (res.code === 200) { let data = res.data console.log(data) data.forEach(element => { //為景區增加一個圖標，以示區別 element['label'] = element['label'] + '' //使用emoji文件，標識這是景區，treeselect沒有icon圖標 element['level'] = '4' }) parentNode.children = data } }) callback() break } } }

最后效果

這通過幾天研究，掌握了Treeselect動態構建，可以解決巨樹構建問題。

總結

以上是生活随笔為你收集整理的element vue 动态单选_VUE 动态构建混合数据Treeselect选择树，同时解决巨树问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。