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>