vue-treeselect無法點(diǎn)擊問題(點(diǎn)擊無法出現(xiàn)拉下菜單)

更新時(shí)間：2022年04月30日 16:25:21 作者：vectorJ

這篇文章主要介紹了vue-treeselect無法點(diǎn)擊問題(點(diǎn)擊無法出現(xiàn)拉下菜單)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-treeselect無法點(diǎn)擊

問題原因

樣式?jīng)_突（使用了elementui）

場(chǎng)景：在el-form標(biāo)簽中，如果使用了標(biāo)簽，并且父標(biāo)簽不是的話，就會(huì)出現(xiàn)無法點(diǎn)擊的問題。（沒有嚴(yán)格按elementui的標(biāo)簽嵌套）

可正常點(diǎn)擊

<el-row>
? ?<el-col :span="24" ?v-if="form.parentId !== 0">
? ? ?<el-form-item ? label="上級(jí)字典" prop="parentId">
? ? ? ?<treeselect v-model="parentId" :options="dictOptions" ?/>
? ? ?</el-form-item>
? ?</el-col>
?</el-row>

不能正常點(diǎn)擊

<el-col :span="24" >
? <el-form-item ? label="上級(jí)字典" prop="parentId">
? ? <treeselect v-model="parentId" :options="dictOptions" ?/>
? </el-form-item>
</el-col>

其他場(chǎng)景下，應(yīng)該也是樣式?jīng)_突的問題。

vue-treeselect的基本一些用法

1.首先需要先安裝

@riophae/vue-treeselect":"^0.0.37

這是vue官方的中文文檔可以參考 https://www.vue-treeselect.cn/#node

2.需要引入至vue頁(yè)面使用

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  components: {
    Loadding,
    Treeselect,
  },

3.需要在頁(yè)面中寫入

          <div class="search_row_label">單位管理范圍：</div>
              <div class="search_row_content">
                <treeselect
                 noResultsText="暫無結(jié)果" 
                 v-model="dwgxfw"
                  clearValueText="刪除"     	//“×”按鈕的標(biāo)題
                  :searchable="false"           //是否啟用搜索功能
                  :options="szxzList"           //選項(xiàng)數(shù)據(jù)
                  :load-options="loadOptions"   //用于動(dòng)態(tài)加載選項(xiàng)
                  placeholder="請(qǐng)選擇"
                  @select="changeSelect"        //選擇一個(gè)選項(xiàng)后發(fā)出用于選擇
                  @input="inputChange"          //輸入框值更改后發(fā)出觸發(fā)
                >
                
                </treeselect>

4.這里舉例實(shí)際應(yīng)用

首先需要先獲取到父節(jié)點(diǎn)的值

 getParentLocalityName(){
      this.getRequest(this.Jurisdiction,"s_kj/s_kj_02/s_kj_02_01/loadDiscritctTreeRootNode","").then(res=>{
        // this.Loadding = false;
        //這里先判斷狀態(tài)
        if(res.data.state==1){
          let resData = res.data.data
          let objData = {}  //定義一個(gè)空對(duì)象
           objData.id = resData.localitycode;
          objData.label = resData.localityname;
          objData.name = resData.localitydesc;
          objData.children = null;
            this.szxzList.push(objData)  //在這里將獲取到的數(shù)據(jù)代入
            console.log(this.szxzList)
        }else{
              this.Loadings = false;
              this.$Message.error(res.data.msg);
        }
      }).catch(error=>{
                this.Loadings = false;
      })

5.當(dāng)點(diǎn)擊時(shí)加載子數(shù)據(jù)

  loadOptions({action,parentNode,callback}){
  //這里有三個(gè)參數(shù)
  action   獲取到的值
  parentNode  加載子選項(xiàng)時(shí)顯示
  callback		接受error參數(shù)的函數(shù)
      console.log(parentNode)
      let params={
                parentLocCode: parentNode.id
      }
      this.getRequest(this.Jurisdiction,"s_kj/s_kj_02/s_kj_02_01/loadDiscrictTreeNode",urlPath(params)).then(res=>{
        if(res.data.state==1){
          if(res.data.data.length>0){
            let resData =res.data.data
            let arr = []   //定義空數(shù)組
            resData.forEach(item=>{
              let objData={}
              objData.id = item.localitycode;
              objData.label = item.localityname;
              objData.name = item.localitydesc;
              console.log(item.localitylevel)
               if (item.localitylevel <=item.localitylevel+1) {  //這里選擇需要獲取幾個(gè)子節(jié)點(diǎn)進(jìn)行判斷
                objData.children = null
                   objData.loading=false;
              }
              arr.push(objData)  //將獲取的數(shù)據(jù)代入
            })
           parentNode.children = arr;
            callback();
          }
        }
      })
    },  
    changeSelect(n,i){
      console.log(n)
   if (n.label == "長(zhǎng)江流域") {
        this.dwgxfw = "";
      } else {
        console.log(222)
        this.dwgxfw = n.label;
        this.dwglcode = n.id
      }
    },
     inputChange(n, i) {
      if (n == undefined) {
        this.dwgxfw = "";
      }
    },