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

2020-11-21   阅读:3513   类型:前端   分类:Vue    标签: Vue

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

效果演示

image.png

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
                }
            ]
        }
    ]
}

按照上面的数据源格式即可生成树形折叠格式列表

腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/517.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×