elementUI实现el-tree默认选中第一个：

---

一、效果：

二、实现：

<template>
    <div class="HomeMain">
        <div class="leftMain">
            <el-tree :data="treeData" :props="defaultProps" ref="tree" node-key="id" default-expand-all
                :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"
                :default-expanded-keys="checkDefault" />
        </div>
        <div class="rightMain">
        	......
        </div>    
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            treeData: [{
                id: 1,
                label: '全部',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }],
            defaultProps: {
                children: "children",
                label: "label"
            },
            checkDefault: [1],//存放默认选中节点的id
            // checkDefault: [4],//存放默认选中节点的id
        }
    },
    created() {
    
    },
    watch: {
        checkDefault: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        document.querySelector('.el-tree-node__content').click()
                        //默认选中第一层级的第一个节点
                        //document.querySelector('.el-tree-node__children .el-tree-node__content').click();
                    })
                }
            },
            immediate: true,
        }
    },
    methods: {
        // 节点单击事件
        handleNodeClick(data) {
            console.log(data);
        },
    },
}
</script>

<style scoped>
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    color: #fff;
    background-color: #409EFF;
}
</style>