快捷導(dǎo)航

elementUI Tree 樹形控件單選實(shí)現(xiàn)示例

更新時(shí)間：2024年06月14日 10:37:13 作者：奶糖肥晨

在ElementUI中樹形控件本身不支持單選功能,本文就來(lái)介紹一下如何實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

展示效果

在這里插入圖片描述

代碼實(shí)現(xiàn)

html相關(guān)：

 <el-tree :data="flatArr" check-strictly accordion show-checkbox node-key="id" :props="defaultProps"
            @check="handleNodeClick" ref="tree">
 </el-tree>

js方法：

 handleNodeClick(data, node, self) {
      // 如果已經(jīng)選中了一個(gè)節(jié)點(diǎn)，則取消選擇
      if (this.currentNodeKey?.name && this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([]);
         // 更新當(dāng)前選中節(jié)點(diǎn)的 key
        this.$refs.tree.setCheckedNodes([data]);
      }

      // 更新當(dāng)前選中節(jié)點(diǎn)的 key
      this.currentNodeKey = data;
    },

義了一個(gè)currentNodeKey來(lái)存儲(chǔ)當(dāng)前選中節(jié)點(diǎn)的 key。每次點(diǎn)擊節(jié)點(diǎn)時(shí)，我們首先檢查是否已經(jīng)有一個(gè)節(jié)點(diǎn)被選中，如果是，則通過(guò)this.$refs.tree.setCurrentKey(null)取消選中它。然后，我們更新currentNodeKey為新選中的節(jié)點(diǎn) key。

請(qǐng)注意，這里的node.key假設(shè)你的每個(gè)節(jié)點(diǎn)數(shù)據(jù)中都有一個(gè)唯一的key屬性。你需要根據(jù)實(shí)際的節(jié)點(diǎn)數(shù)據(jù)結(jié)構(gòu)相應(yīng)地調(diào)整這個(gè)屬性名。

elementui Tree樹形控件其他詳細(xì)數(shù)據(jù)

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
data	展示數(shù)據(jù)	array	—	—
empty-text	內(nèi)容為空的時(shí)候展示的文本	String	—	—
node-key	每個(gè)樹節(jié)點(diǎn)用來(lái)作為唯一標(biāo)識(shí)的屬性，整棵樹應(yīng)該是唯一的	String	—	—
props	配置選項(xiàng)，具體看下表	object	—	—
render-after-expand	是否在第一次展開某個(gè)樹節(jié)點(diǎn)后才渲染其子節(jié)點(diǎn)	boolean	—	true
load	加載子樹數(shù)據(jù)的方法，僅當(dāng) lazy 屬性為true 時(shí)生效	function(node, resolve)	—	—
render-content	樹節(jié)點(diǎn)的內(nèi)容區(qū)的渲染	Function	Function(h, { node, data, store }	—
highlight-current	是否高亮當(dāng)前選中節(jié)點(diǎn)，默認(rèn)值是 false。	boolean	—	false
default-expand-all	是否默認(rèn)展開所有節(jié)點(diǎn)	boolean	—	false
expand-on-click-node	是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開或者收縮節(jié)點(diǎn)，默認(rèn)值為 true，如果為 false，則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會(huì)展開或者收縮節(jié)點(diǎn)。	boolean	—	true
check-on-click-node	是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候選中節(jié)點(diǎn)，默認(rèn)值為 false，即只有在點(diǎn)擊復(fù)選框時(shí)才會(huì)選中節(jié)點(diǎn)。	boolean	—	false
auto-expand-parent	展開子節(jié)點(diǎn)的時(shí)候是否自動(dòng)展開父節(jié)點(diǎn)	boolean	—	true
default-expanded-keys	默認(rèn)展開的節(jié)點(diǎn)的 key 的數(shù)組	array	—	—
show-checkbox	節(jié)點(diǎn)是否可被選擇	boolean	—	false
check-strictly	在顯示復(fù)選框的情況下，是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法，默認(rèn)為 false	boolean	—	false
default-checked-keys	默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組	array	—	—
current-node-key	當(dāng)前選中的節(jié)點(diǎn)	string, number	—	—
filter-node-method	對(duì)樹節(jié)點(diǎn)進(jìn)行篩選時(shí)執(zhí)行的方法，返回 true 表示這個(gè)節(jié)點(diǎn)可以顯示，返回 false 則表示這個(gè)節(jié)點(diǎn)會(huì)被隱藏	Function(value, data, node)	—	—
accordion	是否每次只打開一個(gè)同級(jí)樹節(jié)點(diǎn)展開	boolean	—	false
indent	相鄰級(jí)節(jié)點(diǎn)間的水平縮進(jìn)，單位為像素	number	—	16
icon-class	自定義樹節(jié)點(diǎn)的圖標(biāo)	string	-	-
lazy	是否懶加載子節(jié)點(diǎn)，需與 load 方法結(jié)合使用	boolean	—	false
draggable	是否開啟拖拽節(jié)點(diǎn)功能	boolean	—	false
allow-drag	判斷節(jié)點(diǎn)能否被拖拽	Function(node)	—	—
allow-drop	拖拽時(shí)判定目標(biāo)節(jié)點(diǎn)能否被放置。type 參數(shù)有三種情況：‘prev’、‘inner’ 和 ‘next’，分別表示放置在目標(biāo)節(jié)點(diǎn)前、插入至目標(biāo)節(jié)點(diǎn)和放置在目標(biāo)節(jié)點(diǎn)后	Function(draggingNode, dropNode, type)	—	—