vue-treeselect點(diǎn)擊無法出現(xiàn)拉下菜單怎么解決

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

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

問題原因

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

場景：在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="上級字典" 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="上級字典" prop="parentId">
    <treeselect v-model="parentId" :options="dictOptions"  />
  </el-form-item>
</el-col>

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

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="暫無結(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="請選擇"
                  @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è)空對象
           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 == "長江流域") {
        this.dwgxfw = "";
      } else {
        console.log(222)
        this.dwgxfw = n.label;
        this.dwglcode = n.id
      }
    },
     inputChange(n, i) {
      if (n == undefined) {
        this.dwgxfw = "";
      }
    },

6.實(shí)際的效果圖

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