antd vue Tree樹形控制項的使用

2022-02-28 09:03:37 字數 1549 閱讀 6095

文件:

何時使用

資料夾、組織架構、生物分類、國家地區等等,世間萬物的大多數結構都是樹形結構。使用樹控制項可以完整展現其中的層級關係,並具有展開收起選擇等互動功能。

效果

參考:元件設定

method

onbusinessselectchange(selectedkeys, info) ,
效果

我們給後台傳過去了父節點,如果有反顯的情況下(如:修改,檢視功能),一旦有父節點,子節點又將會全部勾選!!這種情況下又該怎麼辦呢?

思路如下:

1.迴圈遍歷出元件資料最深層子節點,存放在乙個陣列中

2.將後台返回的含有父節點的陣列和第一步驟遍歷的陣列做比較

3.如果有相同值,將相同值取出來,push到乙個新陣列中

4.利用這個新的重組的陣列給tree元件selected賦值

例:

data 中初始化值

//tree select 樹選擇最深子節點

test:,

// 1.迴圈遍歷出最深層子節點,存放在乙個陣列中

gettreechildren(data)else;

return null;

});return this.test;

},// 2.將後台返回的含有父節點的陣列和第一步驟遍歷的陣列做比較

// 3.如果有相同值,將相同值取出來,push到乙個新陣列中

compareitem(all_data,child_data)}}

return uniquechild;

},//授權編輯

authorizeedit(text, record, index) }).then((data) =>

//1.獲取元件最深子節點,tree的data

var child_data = this.gettreechildren(this.treedata);

console.log(child_data,'child_data........');

//2,3 獲取相同的子節點

console.log(all_data,'all_data........');

var uniquechild = this.compareitem(all_data,child_data);

console.log(uniquechild,'uniquechild........');

//4.利用這個新的重組的陣列給tree元件selected賦值

this.authorize_value = uniquechild;

});},

樹形控制項QTreeWidget

1 import sys2 from pyqt5.qtcore importqt3 from pyqt5.qtwidgets import qlabel,qhboxlayout45 6class demo qwidget 7def init self 8 super demo,self init 9...

樹形控制項的使用

m tree.modifystyle null,tvs hasbuttons tvs haslines tvs linesatroot 設定 cimagelist pimagelist pimagelist new cimagelist pimagelist create 16,16,ilc mas...

樹形控制項簡單例子

此例項實現的功能 在乙個樹形控制項中顯示雞啄公尺 的簡單結構分層,共有三層,分別為雞啄公尺 各個分類和文章。用滑鼠左鍵單擊改變選中節點後,將選中節點的文字顯示到編輯框中。下面是具體實現步驟 1.建立乙個基於對話方塊的mfc工程,名稱設定為 example31 2.在自動生成的對話方塊模板idd ex...