the following code is a piece of tree code in the elementUI component, but the append and remove operations on the right disappear, on some computers, but not on some computers. Is this a configuration problem or something? Please kindly help to answer, thank you very much!
< template >
< div class= "custom-tree-container" >
<div class="block">
scoped slot
<el-tree
:data="data5"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data)">
Append
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)">
Delete
</el-button>
</span>
</span>
</el-tree>
</div> < / div >
< / template >
< script >
let id = 1000;
export default {
data() {
const data = [{
id: 1,
label: " 1",
children: [{
id: 4,
label: " 1-1",
children: [{
id: 9,
label: " 1-1-1"
}, {
id: 10,
label: " 1-1-2"
}]
}]
}, {
id: 2,
label: " 2",
children: [{
id: 5,
label: " 2-1"
}, {
id: 6,
label: " 2-2"
}]
}, {
id: 3,
label: " 3",
children: [{
id: 7,
label: " 3-1"
}, {
id: 8,
label: " 3-2"
}]
}];
return {
data4: JSON.parse(JSON.stringify(data)),
data5: JSON.parse(JSON.stringify(data))
}
},
methods: {
append(data) {
const newChild = { id: idPP, label: "testtest", children: [] };
if (!data.children) {
this.$set(data, "children", []);
}
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
}
};