vue elementUI Tree 树形控件的使用方法

用清晰的层级结构展示信息,可展开或折叠。

效果演示

trees.vue代码

复制代码
<template>
   <div>
             <!-- 树形控件 -->
            <el-tree :data="treesList" :props="treesProps" show-checkbox node-key="id"
             default-expand-all  :default-checked-keys="defKeys"></el-tree>
</div>
</template>

Js代码

复制代码
<script>
export default {
    data(){
        return{
            // 树形数据源
            treesList:[],
            // 树形控件的属性绑定对象
            treesProps: {
                label: 'name',
                children: 'children'
            },
            // 默认选择的节点id值数组
            defKeys:[1,2]
        }
    },
    methods: {
        // 分配权限对话框
        async showSetTreesDialog(){
            // 获取所有权限的数据
            const {data:res} = await this.$http.get('permission/trees')
            console.log(res.data)
            this.treesList = res.data
        }
    }
}
</script>

数据源格式

复制代码
{
    "code": 0,
    "msg": "成功",
    "data": [
        {
            "id": 1,
            "name": "用户管理",
            "path": "",
            "pid": 0,
            "children": [
                {
                    "id": 6,
                    "name": "用户列表",
                    "path": "/user",
                    "pid": 1
                }
            ]
        }
    ]
}

按照上面的数据源格式即可生成树形折叠格式列表vue elementUI Tree 树形控件的使用方法-遇见你与你分享

相关推荐
浩男孩3 分钟前
🍀【总结】使用 TS 封装几条开发过程中常使用的工具函数
前端
Mintopia10 分钟前
🧠 AIGC + 区块链:Web内容确权与溯源的技术融合探索
前端·javascript·全栈
晓得迷路了13 分钟前
栗子前端技术周刊第 103 期 - Vitest 4.0、Next.js 16、Vue Router 4.6...
前端·javascript·vue.js
Mintopia14 分钟前
🚀 Next.js Edge Runtime 实践学习指南 —— 从零到边缘的奇幻旅行
前端·后端·全栈
GISer_Jing20 分钟前
不定高虚拟列表性能优化全解析
前端·javascript·性能优化
Predestination王瀞潞35 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
鹏多多38 分钟前
深度解析React中useEffect钩子的使用
前端·javascript·react.js
超级大只老咪39 分钟前
CSS基础语法
前端
冰暮流星40 分钟前
css之box-sizing属性
前端·javascript·css
倚肆43 分钟前
CSS ::before 和 ::after 伪元素详解
前端·css