element ui tree 树形控件 数据重新赋值 默认选中

element ui tree 树形控件 数据重新赋值 默认选中

需求：当对树形控件的数据进行重新赋值时，当前勾选及展开的状态需要保留。

<template>
<div>
<el-tree
ref="tree"
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
:props="defaultProps"
@node-expand="expand"
@node-collapse="collapse"
@check-change="change"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :class="'c' + data.color"
>{{ node.label }}----{{ data.color }}</span
>
</span>
</el-tree>
<el-button @click="submit">submit</el-button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
// 默认展开节点
expandedKeys: [],
// 默认选中节点
checkedKeys: [],
data: [
{
id: 1,
label: "一级 1",
color: "1",
children: [
{
id: 4,
label: "二级 1-1",
color: "2",
children: [
{
id: 9,
label: "三级 1-1-1",
color: "1"
},
{
id: 10,
label: "三级 1-1-2",
color: "1"
}
]
}
]
},
{
id: 2,
label: "一级 2",
color: "1",
children: [
{
id: 5,
label: "二级 2-1",
color: "1"
},
{
id: 6,
label: "二级 2-2",
color: "1"
}
]
},
{
id: 3,
label: "一级 3",
color: "1",
children: [
{
id: 7,
label: "二级 3-1",
color: "1"
},
{
id: 8,
label: "二级 3-2",
color: "1"
}
]
}
],
defaultProps: {
children: "children",
label: "label"
}
};
},
methods: {
// 节点选中状态发生变化时的回调
change(data) {
let nodes = this.$refs.tree.getCheckedNodes()
this.checkedKeys = nodes.map(item => {
return item.id
})
console.log(this.checkedKeys);
},
//节点被展开时触发的事件
expand(data) {
if (!this.expandedKeys.includes(data.id)) {
this.expandedKeys.push(data.id);
}
// console.log(this.expandedKeys);
},
// 节点被关闭时触发的事件
collapse(data) {
let index = this.expandedKeys.indexOf(data.id)
if(index >= 0) {
this.expandedKeys.splice(index, 1)
}
// console.log(this.expandedKeys);
},
submit() {
setTimeout(() => {
console.log(111);
console.log(this.checkedKeys)
this.data = [
{
id: 1,
label: "一级 1",
color: "3",
children: [
{
id: 4,
label: "二级 1-1",
color: "3",
children: [
{
id: 9,
label: "三级 1-1-1",
color: "1"
},
{
id: 10,
label: "三级 1-1-2",
color: "1"
}
]
}
]
},
{
id: 2,
label: "一级 2",
color: "1",
children: [
{
id: 5,
label: "二级 2-1",
color: "1"
},
{
id: 6,
label: "二级 2-2",
color: "1"
}
]
},
{
id: 3,
label: "一级 3",
color: "1",
children: [
{
id: 7,
label: "二级 3-1",
color: "1"
},
{
id: 8,
label: "二级 3-2",
color: "1"
}
]
}
]
}, 1000);
}
},
created() {}
};
</script>
<style scoped>
.c1 {
color: #333;
}
.c2 {
color: red;
}
.c3 {
color: rebeccapurple;
}
</style>

最后

以上就是聪慧冬瓜为你收集整理的element ui tree 树形控件 数据重新赋值 默认选中的全部内容，希望文章能够帮你解决element ui tree 树形控件 数据重新赋值 默认选中所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。