今後就都拼抵抗力了嗷
需求描述
- 此處有一棵懶加載樹（可選人），右側展示已選中的人。
- 且父子關聯，可以通過選中一個部門勾選所有子節點。
-
問題是，選中父節點，當子節點未加載時，是擷取不到勾選的子節點的。
點選展開擷取子節點後，它才會跳出來，展示在右邊。
- 使用者在使用時，往往以為選中父節點就選中了子節點，十分不友好。
解決方法
1.父子關聯（孫節點不再跟）
禁用官方的父子關聯（手動設定繼承選中狀态（僅繼承一層））
2.選中節點加載并手動展開一層
3.已加載的節點和未加載的節點分開處理。如果已加載節點，則展開并立即擷取選中值
4.隻能選中人，且繼承父子關聯時，隻考慮type === 'U’的節點
// check事件方法
getData(data) {
const node = this.$refs.tree.getNode(data.id) // 擷取節點
if (this.multiple) {
// 多選
if (!(node.isLeaf ||(node.childNodes && node.childNodes.length))) {
// 未加載----------------------------------------------------------------
node.loaded = false // 告知目前節點還未加載
node.expand() // 展開并加載目前節點（el内置方法）
} else {
// 已加載----------------------------------------------------------------
node.childNodes.forEach(item => { // 周遊子節點，手動設定繼承checked狀态
if(item.data.type === 'U') {
item.checked = node.checked
}
})
node.expanded = true // 展開目前節點
this.getChecked() // 擷取選中值 ，放入右側
}
} else {
// 單選
...
this.getChecked() // 擷取選中值 ，放入右側
}
},
// 人員懶加載回調方法
getOrgList(node, resolve) {
setTimeout(() => {
if (node.level === 0) {
} else {
// 懶加載子節點
getUserTree(this.params).then(res => {
node.data.children = res.data
resolve(node.data.children)
// 加載子節點時繼承父節點
res.data.forEach(item => {
if(item.type === 'U') {
this.$refs.tree.setChecked(item.id, node.checked)
}
})
// 若為多選模式(嚴謹)，在加載節點後就立即擷取選中值 ，放入右側（因為沒回調）
if (this.multiple) {
this.getChecked()
}
})
}
})
},
另外補充兩個關于節點的配置
// node.expanded = true // 展開節點
// node.loaded = true // 加載節點