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 树形控件的使用方法-遇见你与你分享

相关推荐
Sheldon一蓑烟雨任平生3 分钟前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
詩句☾⋆᭄南笙3 分钟前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒16 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌21 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip26 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙31 分钟前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
夏天想39 分钟前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界1 小时前
这个 CSS 特性,可能终结样式冲突
前端·css
zzzsde1 小时前
【C++】深入理解string类(5)
java·前端·算法
袁煦丞1 小时前
随机菜谱解救选择困难!YunYouJun/cook 成为你的厨房锦囊:cpolar内网穿透实验室第549个成功挑战
前端·程序员·远程工作