Vue ElementUI el-tree 动态设置节点是否显示

要点

• el-tree必须设置属性node-key，作为节点的唯一标识属性；
• 代码第 4 行，通过 node-key 属性的值获取 node 对象；
• 代码第 8/10 行，设置属性 visible 控制节点显示；

// 定义
setNodeVisible(id, f) {
    // node-key 属性的值获取 node 对象
    let node = this.$refs.tree.getNode(id);
    // 可以在控制台看看这个 node 对象的组成
    console.log(node);
    // 方式一：设置属性 visible（建议使用）
    this.$set(node, 'visible', f);
    // 方式二：设置属性 visible
    // node.visible = f;
}
// 使用
setNodeVisible(7, false);

node 对象说明

• Node 是整个树节点对象；
• data 通过属性 data 传入的节点信息；
• id 通过属性node-key，设置的唯一标识，可根据此信息找到Node对象；
• visible 控制节点是显示/隐藏；

完整代码

<template>
<div class="eltree-main">
    <el-tree
        ref="tree"
        node-key="id"
        :data="data"
        show-checkbox
        default-expand-all>
    </el-tree>
</div>
</template>

<script>
export default {
    data() {
        return {
            data: [
                {
                    id: 1,
                    label: '一级 2',
                    children: [
                        {
                            id: 3,
                            label: '二级 2-1',
                            children: [{
                                id: 4,
                                label: '三级 3-1-1'
                            }, {
                                id: 5,
                                label: '三级 3-1-2',
                                disabled: true,
                            }]
                        }, {
                            id: 2,
                            label: '二级 2-2',
                            children: [{
                                id: 6,
                                label: '三级 3-2-1'
                            }, {
                                id: 7,
                                label: '三级 3-2-2',
                            }]
                        }
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        setNodeVisible(id, f) {
            // node-key 属性的值获取 node 对象
            let node = this.$refs.tree.getNode(id);
            // 可以在控制台看看这个 node 对象的组成
            console.log(node);
            // 方式一：设置属性 visible（建议使用）
            this.$set(node, 'visible', f);
            // 方式二：设置属性 visible
            // node.visible = f;
        }
    },
    mounted() {
        this.setNodeVisible(2, false);
    }
}
</script>

效果