大家好，就类似这样的。现在可以实现，点击某个节点，该节点会红色高亮。那怎么让这个树加载出来的时候默认某个节点高亮呢？element ui里面带勾选框的可以默认勾选上，这个没有勾选框，请问该怎么弄，谢谢...

element ui 的树形图 默认设置节点高亮的问题

2051310

发布于
2017-09-05

✓ 已被采纳

element-ui的tree组件我一直都不太喜欢，因为可控范围太小了，还大多是针对可选择形式的

默认节点高亮这个我没做过，不过我做过修改table自定义行高亮，有个业务需求需要，感觉思路应该是互通的

直接操作该节点的dom元素，用css附加高亮样式，拿vue的ref取节点，因为是动态渲染的组件，所以一般需要在组件渲染完成之后执行this.$nextTick方法才能拿到对应的dom节点，这个是个坑，我踩过……拿到相应的节点之后剩下的不要太简单

Jessi

1211

发布于
2018-04-04

这个问题我也遇到过，但是其实很简单。element ui的树形控件支持setCurrentKey()方法，只需要将你要设置的节点的key值设置进去就可以了，前提是要设置好node-key属性。然后在created()钩子里写上代码就可以了。

this.$nextTick(function(){
    this.$refs.vuetree.setCurrentKey(firstLeafCode);  //"vuetree"是你自己在树形控件上设置的 ref="vuetree" 的名称
})

村长家的猫

244

发布于
2019-03-02

更新于
2019-03-02



<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>element-ui</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .el-tree-node__content {
            font-size: 14px;
            height: 40px;
            font-weight: 400;
        }
        .el-tree-node__label:hover {
            color: #0593D3;
        }
        .el-tree-node:focus>.el-tree-node__content {
            color: #0593D3;
        }
        .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
            color: red;
            background-color: transparent;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-tree ref="tree" :data="TreeData" node-key="id" :key="treeKey" current-node-key :props="defaultProps" highlight-current @node-click="handleNodeClick"></el-tree>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            ParmentData: null,
            TreeData: [
                { 
                    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' 
                        }
                    ],
                    show: true
                }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            treeKey:'',
        },
        mounted() {
            this.$nextTick(function(){
                this.$data.TreeData.forEach(row => {
                    if(row.show){                    
                        this.$refs.tree.setCurrentKey(row.id);
                        this.$refs.tree.store.nodesMap[row.id].expanded = true;
                    }
                })
            })
        },
        methods: {
            handleNodeClick: function (data,checked) {
                // 点击事件
            },
            handleCheckChange(data, checked, indeterminate) {
                console.log(data, checked, indeterminate);
            },
        }
    });
</script>

不知道这个是不是你要的效果
图片描述