快捷導(dǎo)航

Element ui tree(樹(shù))實(shí)現(xiàn)父節(jié)點(diǎn)選中時(shí)子節(jié)點(diǎn)不選中父節(jié)點(diǎn)取消時(shí)子節(jié)點(diǎn)自動(dòng)取消功能

更新時(shí)間：2023年07月11日 10:08:41 作者：-耿瑞-

Elementui因?yàn)関ue在國(guó)內(nèi)的影響而受益使用量巨大樹(shù)作為一種重要的開(kāi)發(fā)組件應(yīng)用廣泛，今天帶大家了解樹(shù)的靈活應(yīng)用首先我們來(lái)創(chuàng)建一個(gè)樹(shù)，對(duì)Element ui tree父節(jié)點(diǎn)選中時(shí)子節(jié)點(diǎn)不選中功能感興趣的朋友跟隨小編一起看看吧

Elementui因?yàn)関ue在國(guó)內(nèi)的影響而受益使用量巨大樹(shù)作為一種重要的開(kāi)發(fā)組件應(yīng)用廣泛，今天帶大家了解樹(shù)的靈活應(yīng)用首先我們來(lái)創(chuàng)建一個(gè)樹(shù)

   <el-tree
       :data="data"
        ref="tree"
        show-checkbox
        :check-on-click-node = "true"
        node-key="perId"
        :default-expanded-keys="[]"
        :default-checked-keys="[]"
        :indent = "10">
    </el-tree>

在這里插入圖片描述

我們會(huì)發(fā)現(xiàn)當(dāng)你選中一個(gè)父節(jié)點(diǎn)時(shí)他下面的所以子節(jié)點(diǎn)會(huì)被全部選中

在這里插入圖片描述

我們可以用:check-strictly強(qiáng)制打斷父子節(jié)點(diǎn)的關(guān)聯(lián) (官方文檔 tree有詳細(xì)講解 :check-strictly屬性)當(dāng)這回我們會(huì)發(fā)現(xiàn):取消父節(jié)點(diǎn)時(shí)子節(jié)點(diǎn)依舊處于選中狀態(tài)

在這里插入圖片描述

這是我們可以給一個(gè)勾選事件@check-change = “checkChange”check-change事件官方文檔Element ui tree有詳細(xì)介紹

checkChange(a,b,c){
//如果為取消
  if(b === false){
         //如果當(dāng)前節(jié)點(diǎn)有子集
         if(a.children){
         //循環(huán)子集將他們的選中取消
           a.children.map(item => {
             this.$refs.tree.setChecked(item.perId,false);
           })
         }
       }else{
       //否則(為選中狀態(tài))
           //判斷父節(jié)點(diǎn)id是否為空
           if(a.perParentId !== 0){
           //如果不為空則將其選中
             this.$refs.tree.setChecked(a.perParentId,true);
           }
       }
       this.tableData = this.$refs.tree.getCheckedNodes();
   },

setChecked方法官方文檔有詳細(xì)介紹

到此這篇關(guān)于Element ui tree(樹(shù))實(shí)現(xiàn)父節(jié)點(diǎn)選中時(shí)子節(jié)點(diǎn)不選中父節(jié)點(diǎn)取消時(shí)子節(jié)點(diǎn)自動(dòng)取消功能的文章就介紹到這了,更多相關(guān)Element ui tree父節(jié)點(diǎn)選中時(shí)子節(jié)點(diǎn)不選中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: