ツリー セレクターの強化バージョン、複数選択、単一選択、親選択、ピッカー フォームをサポート - DCloud プラグイン マーケット tki
-tree には、表示するデータのレイヤーを制御する構成項目がないため、自分で拡張する必要があります
。コンポーネント A 構成項目内の 2 つのコンポーネントを展開します。
1.openRank は、展開されたツリーのレベルを制御します。
showAllFlod: {
// 是否展开所有节点
type: Boolean,
default: false
}
2.showAllFlod すべて展開
openRank: {
type: [Number, String],
}
次に、メソッドでデータを処理します
//扁平化树结构
_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
let openRank = this.openRank ? (rank < this.openRank) : false; // 如果这两个参数都没设置的话就全都收起来
let showRank = this.openRank ? (rank < this.openRank - 1) : false;// 如果设置了层级,那么需要让层级的上一级箭头是收起状态,否则需要通过点击触发的事件才能把数据展示出来
if (this.showAllFlod) {
openRank = showRank = true;
}
list.forEach(item => {
this.treeList.push({
id: item[this.idKey],
name: item[this.rangeKey],
source: item,
disabled: item.disabled,
parentId, // 父级id数组
parents, // 父级id数组
rank, // 层级
showChild: Boolean(showRank), //箭头怎么展示
open: Boolean(showRank), //是否打开
show: Boolean(openRank || rank === 0), // 自身是否显示
hideArr: [],
orChecked: item.checked ? item.checked : false,
checked: item.checked ? item.checked : false,
childNum: 0
})
if (Array.isArray(item.children) && item.children.length > 0) {
let parentid = [...parentId],
parentArr = [...parents];
delete parentArr.children
parentid.push(item[this.idKey]);
parentArr.push({
[this.idKey]: item[this.idKey],
[this.rangeKey]: item[this.rangeKey]
})
// lazy
if(!this.lazy) {
this._renderTreeList(item.children, rank + 1, parentid, parentArr)
}
} else {
this.treeList[this.treeList.length - 1].lastRank = true;
}
})
},