快捷導(dǎo)航

element?UI中在?el-select?與?el-tree?結(jié)合組件實(shí)現(xiàn)過(guò)程

更新時(shí)間：2023年02月27日 16:13:21 作者：三勺

項(xiàng)目上實(shí)現(xiàn)某個(gè)功能，使用到了?el-select?和?el-tree?組合實(shí)現(xiàn)，記錄下兩者結(jié)合的實(shí)現(xiàn)過(guò)程，對(duì)?el-select?與?el-tree?結(jié)合組件實(shí)現(xiàn)過(guò)程感興趣的朋友跟隨小編一起看看吧

前言

項(xiàng)目上實(shí)現(xiàn)某個(gè)功能，使用到了 el-select 和 el-tree 組合實(shí)現(xiàn)，記錄下兩者結(jié)合的實(shí)現(xiàn)過(guò)程。

要求根據(jù)項(xiàng)目接口提供的數(shù)據(jù)，el-tree 里的數(shù)據(jù)是一次性返回來(lái)的，點(diǎn)擊最后一層級(jí)時(shí)，請(qǐng)求接口，在點(diǎn)擊層級(jí)下方追加數(shù)據(jù)追加的數(shù)據(jù)要顯示勾選框，可進(jìn)行勾選，且是單選勾選后需要返回勾選的層級(jí)以及它的父級(jí)

實(shí)現(xiàn)效果如下：

數(shù)據(jù)回顯效果：

實(shí)現(xiàn)關(guān)鍵部分

el-tree里的顯示勾選框不符合當(dāng)前“追加的數(shù)據(jù)要顯示勾選框，可進(jìn)行勾選”這個(gè)需求，所以我修改了el-tree的源碼進(jìn)行使用。

追加子級(jí)數(shù)據(jù)，el-tree 文檔提供了這個(gè)這個(gè)方法，可以追加子級(jí)

數(shù)據(jù)對(duì)象里有指定字段才顯示勾選框，這里我指定字段為 currentShowCheck，數(shù)據(jù)追加的時(shí)候把指定需要顯示勾選框的字段加上

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

修改源碼，數(shù)據(jù)中有 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>

這樣子就實(shí)現(xiàn)以上的效果了

到此這篇關(guān)于element UI中在 el-select 與 el-tree 結(jié)合組件實(shí)現(xiàn)過(guò)程的文章就介紹到這了,更多相關(guān)el-select 與 el-tree 結(jié)合組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: