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>

目录
相关文章
|
JavaScript
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
1873 0
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9112 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
873 0
element中tree组件的选中获取和返显
本文介绍了如何在Element UI的tree组件中获取选中的节点值以及如何进行节点的默认选中(返显)。主要通过使用`getCheckedKeys()`和`getHalfCheckedKeys()`方法来获取完全和半选中的节点,然后使用`setCheckedKeys()`方法来设置默认选中的节点。
1204 2
element中tree组件的选中获取和返显
|
11月前
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
3912 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
2206 0
el-input限制输入整数等分析
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
3090 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
769 3
|
JavaScript
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
在Vue 3和Element Plus项目中实现具有懒加载功能的el-tree树形控件,以优化大数据量时的页面性能。
2660 0

热门文章

最新文章