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

這篇文章主要講解了“Vue動(dòng)態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題如何解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue動(dòng)態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題如何解決”吧！

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

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

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

這里有兩個(gè)參數(shù)，用@requestParam傳遞的，注意要用post，前端VUE使用get傳遞時(shí)會(huì)報(bào)錯(cuò)。

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

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

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

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

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

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

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

六、最后效果

這個(gè)方法動(dòng)態(tài)實(shí)現(xiàn)Treeselect構(gòu)建，可以解決巨樹構(gòu)建問題。

感謝各位的閱讀，以上就是“Vue動(dòng)態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題如何解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue動(dòng)態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題如何解決這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！