el-tree 動态指定預設選中節點

核心代碼

• highlight-current 高亮選中節點
• node-key="label" 指定以哪個屬性為唯一識别的 key
• :current-node-key="current" 自定義current變量，存儲預設選中節點對應的key值
• v-if="current" 因是動态綁定，最開始current為空，是以需在current有值後，才渲染 el-tree

完整示範代碼

<template>
    <el-tree
            v-if="current"
            node-key="label"
            :current-node-key="current"
            :default-expand-all="true"
            :expand-on-click-node="false"
            highlight-current
            :data="data"
            :props="defaultProps"
            >
    </el-tree>
</template>
<script>
    export default {
        mounted() {
            this.current = '成都市'
        },
        data() {
            return {
                current: '',
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                data: [
                    {
                        label: '四川省',
                        children: [
                            {
                                label: '成都市',
                                children: [
                                    {label: '武侯區'}
                                ]
                            }
                        ]
                    },
                    {
                        label: '湖北省',
                        children: [
                            {label: '武漢市'}
                        ]
                    }
                ]
            }
        }
    }
</script>