我正在嘗試將選定的樹視圖專案移動到另一個父節點，它可以作業，只是在單擊其新父節點時移動的專案不再可選擇。
重現步驟：
- 選擇
node2_item1 - 點擊
Move to node1按鈕 - 選擇
node1
我正在使用 VueJS 2.6.14 和 Vuetify 2.6.4
<template>
<v-container>
<v-row>
<v-col>
<v-treeview
v-model="treeSelection"
:items="tree"
dense
selectable
return-object
open-all
>
</v-treeview>
</v-col>
<v-col class="col-9">
<v-btn class="mt-2" @click="moveSelectedItems('node1')">Move to node1</v-btn>
<v-spacer></v-spacer>
<v-btn class="mt-2" @click="moveSelectedItems('node2')">Move to node2</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "TestTree",
data() {
return {
treeSelection: [],
items: {
node1: ["node1_item1", "node1_item2", "node1_item3", "node1_item4"],
node2: ["node2_item1", "node2_item2"]
}
};
},
computed: {
tree() {
let tree = [];
for (const [node, items] of Object.entries(this.items)) {
tree.push({
id: node,
name: node,
children: items.map(n => ({
id: n,
name: n
}))
});
}
return tree;
}
},
methods: {
moveSelectedItems(nodeName) {
if (this.treeSelection.length) {
const selectedItems = this.treeSelection.map(el => el.id);
let oldNodes = new Set();
for (const itemId of selectedItems) {
for (const [oldNodeName, items] of Object.entries(this.items)) {
if (items.includes(itemId)) {
oldNodes.add(oldNodeName);
}
}
}
const oldNodeName = [...oldNodes][0];
for (const itemId of selectedItems) {
for (const items of this.items[oldNodeName]) {
if (items.includes(itemId)) {
const oldNodeItemIndex = this.items[oldNodeName].findIndex(
el => el === itemId
);
if (oldNodeItemIndex !== -1) {
this.items[oldNodeName].splice(oldNodeItemIndex, 1);
}
}
}
this.items[nodeName].push(itemId);
}
this.treeSelection = [];
}
}
}
};
</script>
UPD折疊node1和擴展它有幫助，但我想以某種方式以編程方式重繪 樹。
uj5u.com熱心網友回復：
解決方案之一是無論如何重新渲染樹視圖。所以，我建議在 treeSelection 變數的值變化增加索引時密切關注 [這里][1] 是現場演示
watch: {
treeSelection: {
handler(n) {
this.treeKey ;
}
}
},
并在模板部分系結鍵屬性
<v-treeview
v-model="treeSelection"
:items="tree"
dense
selectable
return-object
open-all
:key="treeKey"
>
</v-treeview>
[1]：https ://codepen.io/nileshku123132522/pen/poVaBWN?editors=1010 ）
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/510588.html