Vue動態構建混合資料Treeselect選擇樹及巨樹問題的解決方法

全國的行政區域到縣已經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<1map>  regionJson = iMapRegionService.selectRegionJson(adcode,level);
        return AjaxResult.success(regionJson);
    }
}

2、查詢行政區域下的景區，根據adcode查詢，一個引數，引數放在路徑中傳遞的。

    @GetMapping("/listByCode/{adcode}")
    @ApiOperation("根據查詢條件獲取景區清單")
    public AjaxResult listByCode(@PathVariable String adcode)
    {
        List<1map> scenicList = iMapScenicService.selectScenicByCode(adcode);
        return AjaxResult.success(scenicList);
    }
}

由於後面要用懶載入，在引用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: [],

noChildrenText=“更新中…” , //由於預設會將沒有載入下級節點的children設定為null，系統預設會顯示No sub-options，點選節點是，顯示更新中更好，更新完成顯示子節點。
:load-options=“loadOptions” //增加此選項，在後方擴充套件子節點是會呼叫此方法，第一是點選左邊的三解形，第二下面將非葉子節點設定為不能選擇，點選節點也會自動擴充套件。
:disable-branch-nodes=“true”> //將樹枝節點設定為不能選擇，樹枝節點是行政區域，也不我們需要的景區ID，所以不能選擇，否則資料會亂。

 < el-form-item label="景區名稱" prop="scenicId">
  < treeselect
    v-model="form.scenicId"
    :options="regionOptions"
    noChildrenText="更新中..."  
    :load-options="loadOptions"
    placeholder="請選擇景區"
    :disable-branch-nodes="true">
  < /treeselect>
< /el-form-item>

元件開啟初始化時，構建一級選擇樹

 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構建，可以解決巨樹構建問題。