iView的tree元件實現單選功能

2022-06-12 01:21:12 字數 805 閱讀 7974

iview中的樹元件有核取方塊可以多選,但是目前還沒有提供單選框的模式,不顯示核取方塊可以提供高亮單選的模式,但是再次點選就被取消了,沒有實現真正的單選;

tree 的屬性配置中 multiple 是否支援多選,是在不顯示核取方塊的時候生效的,不能控制核取方塊支不支援多選;

實現單選功能中用到了:

:show-checkbox="true"  // 是否顯示核取方塊

:check-strictly="true" // 顯示核取方塊的前提下,是否讓父子節點不聯動

:check-directly="true" // 在顯示核取方塊的前提下,讓節點的選中觸發核取方塊的選中

@on-check-change="treechange"  // 核取方塊被選中的時候觸發,可能是點選核取方塊的時候被選中,也可能是點選節點的時候被選中;返回 當前已勾選節點的陣列、當前項

使用 getselectednodes() 獲取被選中的節點陣列,getselectednodes()[0] 獲得被選中節點的資料

檢視、邏輯、樣式 如下:

1

23 ref="orgtree"

4 :data="orgtree"

5 :show-checkbox="true"

6 :check-strictly="true"

7 :check-directly="true"

8 @on-check-change="treechange"

9 >

1011

1226

27

寫的比較簡單,可能還有不完善的地方,還請各位大佬批評指正

Tree後台元件實現

tree元件簡介 建立tree元件 案例1案例2 總結tree 樹 使用 fn.tree.defaults重寫預設值物件。樹控制項在web頁面中乙個將分層資料以樹形結構進行顯示。它提供使用者展開 摺疊 拖拽 編輯和非同步載入等功能 可以使用 mx.tree 標籤定義乙個tree元件 如果你打算在其他...

iview元件的改寫

1 最近工作的時候常常遇到一些改變樣式的需求。但是有的元件是iview提供的,在多個地方使用,如果要在某處地方修改它的樣式,記得給css樣式加上權重,不然會影響其他位置的樣式。比如修改table的高亮樣式,和每一行的hover事件的樣式 modifyelement ivu table row hig...

iview中Cascader元件的坑

只認識這種結構的,所以拿到資料要處理下 必須是label value,有二級的是children v modal 要綁成 1,3 如果不使用change on select,1 是渲染不了的。on change有兩個預設值,但是我們想自己插值的話,這兩個預設值就沒了 比如 使用了v for迴圈要插入...