elementUI中怎么結合el-select與el-tree組件

這篇文章主要介紹了elementUI中怎么結合el-select與el-tree組件的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇elementUI中怎么結合el-select與el-tree組件文章都會有所收獲，下面我們一起來看看吧。

前言

要求根據項目接口提供的數據，el-tree 里的數據是一次性返回來的，點擊最后一層級時，請求接口，在點擊層級下方追加數據追加的數據要顯示勾選框，可進行勾選，且是單選勾選后需要返回勾選的層級以及它的父級

實現效果如下：

數據回顯效果：

實現關鍵部分

el-tree里的顯示勾選框不符合當前“追加的數據要顯示勾選框，可進行勾選”這個需求，所以我修改了el-tree的源碼進行使用。

追加子級數據，el-tree 文檔提供了這個這個方法，可以追加子級

數據對象里有指定字段才顯示勾選框，這里我指定字段為 currentShowCheck，數據追加的時候把指定需要顯示勾選框的字段加上

let data=[
  {
    label:'追加1',
    currentShowCheck:true
   },
   {
     label:'追加2',
     currentShowCheck:true
    }
  ]

修改源碼，數據中有 currentShowCheck 字段的則顯示 checkbox

<!--            顯示 checkbox  有指定字段才顯示   checkbox  currentShowCheck-->
      <el-checkbox
          v-if = "showCheckbox && node.data.currentShowCheck"
	  v-model="node.checked"
	  :indeterminate="node.indeterminate"
	  :disabled="!!node.disabled"
	  @click.native.stop
	  @change="handleCheckChange
>
</el-checkbox>
<span
   v-if="node.loading"
   class="el-tree-node__loading-icon el-icon-loading">
 </span>
 <node-content : node="node"></node-content>

關于“elementUI中怎么結合el-select與el-tree組件”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“elementUI中怎么結合el-select與el-tree組件”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。