Vue動態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題的解決

更新時間：2022年07月26日 11:27:16 作者：海鹽老伍

這篇文章主要介紹了Vue動態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

全國的行政區(qū)域到縣已經(jīng)3500多了，再加上景區(qū)會有幾萬個點(diǎn)，這棵選擇樹不論是在后臺還是在前臺構(gòu)建都比較大，會影響系統(tǒng)性能，需要前后端結(jié)合，動態(tài)構(gòu)建，使用時用懶加載，提升系統(tǒng)性能。

一、后臺構(gòu)建兩個表的數(shù)據(jù)選擇查詢功能

1、行政區(qū)域需要按省、市、縣的adcode和級別查詢，以便于動態(tài)構(gòu)建。

兩個參數(shù)，adcode后臺查詢時會將后面的0去掉匹配，級別如果0或空，查詢匹配下所有的，為數(shù)字只查本級。

這里有兩個參數(shù)，用@requestParam傳遞的，注意要用post，前端VUE使用get傳遞時會報錯。

? ? @PostMapping("/listjson" )
? ? @ApiOperation("根據(jù)查詢條件獲取區(qū)劃清單")
? ? public AjaxResult listJson(@RequestParam(name="adcode", required = true) String adcode, @RequestParam(name="level",required = true) String level)
? ? {
? ? ? ? System.out.println(adcode);
? ? ? ? List<Map<String, String>> ?regionJson = iMapRegionService.selectRegionJson(adcode,level);
? ? ? ? return AjaxResult.success(regionJson);
? ? }
}

2、查詢行政區(qū)域下的景區(qū)，根據(jù)adcode查詢，一個參數(shù)，參數(shù)放在路徑中傳遞的。

? ? @GetMapping("/listByCode/{adcode}")
? ? @ApiOperation("根據(jù)查詢條件獲取景區(qū)清單")
? ? public AjaxResult listByCode(@PathVariable String adcode)
? ? {
? ? ? ? List<Map<String, String>> 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 {
? ? ? ? //地點(diǎn)列表
? ? ? ? regionOptions: [],

三、使用Treeselect組件

noChildrenText=“更新中…” , //由于缺省會將沒有加載下級節(jié)點(diǎn)的children設(shè)置為null，系統(tǒng)缺省會顯示No sub-options，點(diǎn)擊節(jié)點(diǎn)是，顯示更新中更好，更新完成顯示子節(jié)點(diǎn)。
:load-options=“l(fā)oadOptions” //增加此選項(xiàng)，在后方擴(kuò)展子節(jié)點(diǎn)是會調(diào)用此方法，第一是點(diǎn)擊左邊的三解形，第二下面將非葉子節(jié)點(diǎn)設(shè)置為不能選擇，點(diǎn)擊節(jié)點(diǎn)也會自動擴(kuò)展。
:disable-branch-nodes=“true”> //將樹枝節(jié)點(diǎn)設(shè)置為不能選擇，樹枝節(jié)點(diǎn)是行政區(qū)域，也不我們需要的景區(qū)ID，所以不能選擇，否則數(shù)據(jù)會亂。

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

四、構(gòu)建初始的省級目錄

組件打開初始化時，構(gòu)建一級選擇樹

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

五、構(gòu)建動態(tài)生成的二、三、四級目錄

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