vue-treeselect點擊無法出現拉下菜單怎么解決

這篇文章主要講解了“vue-treeselect點擊無法出現拉下菜單怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue-treeselect點擊無法出現拉下菜單怎么解決”吧！

vue-treeselect無法點擊

問題原因

樣式沖突（使用了elementui）

場景：在el-form標簽中，如果使用了標簽，并且父標簽不是的話，就會出現無法點擊的問題。（沒有嚴格按elementui的標簽嵌套）

可正常點擊

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

不能正常點擊

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

其他場景下，應該也是樣式沖突的問題。

vue-treeselect的基本一些用法

1.首先需要先安裝

@riophae/vue-treeselect":"^0.0.37

2.需要引入至vue頁面使用

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

3.需要在頁面中寫入

          <div class="search_row_label">單位管理范圍：</div>
              <div class="search_row_content">
                <treeselect
                 noResultsText="暫無結果" 
                 v-model="dwgxfw"
                  clearValueText="刪除"     	//“×”按鈕的標題
                  :searchable="false"           //是否啟用搜索功能
                  :options="szxzList"           //選項數據
                  :load-options="loadOptions"   //用于動態加載選項
                  placeholder="請選擇"
                  @select="changeSelect"        //選擇一個選項后發出用于選擇
                  @input="inputChange"          //輸入框值更改后發出觸發
                >
                
                </treeselect>

4.這里舉例實際應用

首先需要先獲取到父節點的值

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

5.當點擊時加載子數據

  loadOptions({action,parentNode,callback}){
  //這里有三個參數
  action   獲取到的值
  parentNode  加載子選項時顯示
  callback		接受error參數的函數
      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 = []   //定義空數組
            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) {  //這里選擇需要獲取幾個子節點進行判斷
                objData.children = null
                   objData.loading=false;
              }
              arr.push(objData)  //將獲取的數據代入
            })
           parentNode.children = arr;
            callback();
          }
        }
      })
    },  
    changeSelect(n,i){
      console.log(n)
   if (n.label == "長江流域") {
        this.dwgxfw = "";
      } else {
        console.log(222)
        this.dwgxfw = n.label;
        this.dwglcode = n.id
      }
    },
     inputChange(n, i) {
      if (n == undefined) {
        this.dwgxfw = "";
      }
    },

6.實際的效果圖

感謝各位的閱讀，以上就是“vue-treeselect點擊無法出現拉下菜單怎么解決”的內容了，經過本文的學習后，相信大家對vue-treeselect點擊無法出現拉下菜單怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！