用清晰的层级结构展示信息,可展开或折叠。
效果演示
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>
数据源格式文章来源:https://www.toymoban.com/news/detail-783829.html
{ "code": 0, "msg": "成功", "data": [ { "id": 1, "name": "用户管理", "path": "", "pid": 0, "children": [ { "id": 6, "name": "用户列表", "path": "/user", "pid": 1 } ] } ] }
按照上面的数据源格式即可生成树形折叠格式列表vue elementUI Tree 树形控件的使用方法-遇见你与你分享文章来源地址https://www.toymoban.com/news/detail-783829.html
到了这里,关于vue elementUI Tree 树形控件的使用方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!