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>

目录
相关文章
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
2844 0
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
7195 0
Element el-date-picker 日期选择器详解
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
1586 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10884 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
element中tree组件的选中获取和返显
本文介绍了如何在Element UI的tree组件中获取选中的节点值以及如何进行节点的默认选中(返显)。主要通过使用`getCheckedKeys()`和`getHalfCheckedKeys()`方法来获取完全和半选中的节点,然后使用`setCheckedKeys()`方法来设置默认选中的节点。
2105 2
element中tree组件的选中获取和返显
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6670 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
存储 开发框架 JavaScript
在Vue3项目中使用pinia代替Vuex进行数据存储
在Vue3项目中使用pinia代替Vuex进行数据存储
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
10190 10
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
3162 0