el-tree 动态指定默认选中节点

简介: 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>

目录
相关文章
|
2月前
【sgTree】自定义组件:加载el-tree树节点整棵树数据,实现增删改操作。
【sgTree】自定义组件:加载el-tree树节点整棵树数据,实现增删改操作。
|
8月前
easyui的tree节点的获取和选中
easyui的tree节点的获取和选中
|
10月前
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
339 1
|
11月前
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
371 0
|
JavaScript
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
1459 0
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
|
1天前
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
5 0
|
1天前
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
6 0
|
1天前
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
5 0
|
8月前
easyui tree 默认选中第一个元素
easyui tree 默认选中第一个元素
|
8月前
|
JSON JavaScript 数据格式
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
51 1