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

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

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

展示效果

在這里插入圖片描述

代碼實現(xiàn)

html相關：

 <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)選中了一個節(jié)點，則取消選擇
      if (this.currentNodeKey?.name && this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([]);
         // 更新當前選中節(jié)點的 key
        this.$refs.tree.setCheckedNodes([data]);
      }

      // 更新當前選中節(jié)點的 key
      this.currentNodeKey = data;
    },

義了一個currentNodeKey來存儲當前選中節(jié)點的 key。每次點擊節(jié)點時，我們首先檢查是否已經(jīng)有一個節(jié)點被選中，如果是，則通過this.$refs.tree.setCurrentKey(null)取消選中它。然后，我們更新currentNodeKey為新選中的節(jié)點 key。

請注意，這里的node.key假設你的每個節(jié)點數(shù)據(jù)中都有一個唯一的key屬性。你需要根據(jù)實際的節(jié)點數(shù)據(jù)結構相應地調整這個屬性名。

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

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