el-tree实现表格方式菜单

news2024/11/23 15:21:43 

<template>
  <div class="table">
    <!-- default-expand-all 默认展开全部数据 -->
    <!-- expand-on-click-node 只有点击箭头才会收缩节点 -->
    <!-- check-on-click-node 点击文本选中 -->
    <!-- show-checkbox 复选框 -->
    <div class="menu-list">
      <el-tree ref="tree" :data="list" default-expand-all :expand-on-click-node='false' check-on-click-node show-checkbox node-key="menuId" :props="defaultProps"></el-tree>
    </div>
    <el-button @click="getCheckedKeys">通过 key 获取</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          "menuId": 1,
          "menuName": "首页(首页)",
          "menuCode": "首页",
          "parentId": 0,
          "orderNum": 0,
          "path": "/page",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-shouye",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 2,
              "menuName": "首页(首页)",
              "menuCode": "首页",
              "parentId": 1,
              "orderNum": 1,
              "path": "/welcome",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 3,
          "menuName": "随访数据查询(随访数据查询)",
          "menuCode": "随访数据查询",
          "parentId": 0,
          "orderNum": 1,
          "path": "/followUpDataQuery",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-shengwuxuejiance",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 4,
              "menuName": "随访数据查询(随访数据查询)",
              "menuCode": "随访数据查询",
              "parentId": 3,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 5,
              "menuName": "随访详情(随访详情)",
              "menuCode": "随访详情",
              "parentId": 3,
              "orderNum": 2,
              "path": "detail",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 21,
          "menuName": "此单名称(11)",
          "menuCode": "11",
          "parentId": 0,
          "orderNum": 1,
          "path": "请问请问饿```",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "321",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          // "children": null
        },
        {
          "menuId": 6,
          "menuName": "调查数据查询(调查数据查询)",
          "menuCode": "调查数据查询",
          "parentId": 0,
          "orderNum": 2,
          "path": "/surveyDataQuery",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-shaichaxinxichaxun",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 7,
              "menuName": "调查数据查询(调查数据查询)",
              "menuCode": "调查数据查询",
              "parentId": 6,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 8,
              "menuName": "新建问卷(新建问卷)",
              "menuCode": "新建问卷",
              "parentId": 6,
              "orderNum": 2,
              "path": "evaluationreport",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 9,
              "menuName": "随访详情(随访详情)",
              "menuCode": "随访详情",
              "parentId": 6,
              "orderNum": 3,
              "path": "evaluationlook",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 10,
          "menuName": "任务配置(任务配置)",
          "menuCode": "任务配置",
          "parentId": 0,
          "orderNum": 3,
          "path": "/taskSet",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-renwuguanli",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 11,
              "menuName": "任务配置(任务配置)",
              "menuCode": "任务配置",
              "parentId": 10,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 12,
          "menuName": "数据统计(数据统计)",
          "menuCode": "数据统计",
          "parentId": 0,
          "orderNum": 4,
          "path": "/dataStatistics",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-shujutongji",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 13,
              "menuName": "数据统计(数据统计)",
              "menuCode": "数据统计",
              "parentId": 12,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 14,
          "menuName": "数据导出(数据导出)",
          "menuCode": "数据导出",
          "parentId": 0,
          "orderNum": 5,
          "path": "/dataExport",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-suifangrenwuguanli",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 15,
              "menuName": "数据导出(数据导出)",
              "menuCode": "数据导出",
              "parentId": 14,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 16,
          "menuName": "系统管理(系统管理)",
          "menuCode": "系统管理",
          "parentId": 0,
          "orderNum": 6,
          "path": "/systemManage",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-xitongguanli",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 17,
              "menuName": "用户管理(用户管理)",
              "menuCode": "用户管理",
              "parentId": 16,
              "orderNum": 1,
              "path": "usersManage",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 18,
              "menuName": "角色管理(角色管理)",
              "menuCode": "角色管理",
              "parentId": 16,
              "orderNum": 2,
              "path": "roleManage",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 19,
              "menuName": "权限配置(权限配置)",
              "menuCode": "权限配置",
              "parentId": 16,
              "orderNum": 3,
              "path": "permissionSetting",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 20,
              "menuName": "菜单管理(菜单管理)",
              "menuCode": "菜单管理",
              "parentId": 16,
              "orderNum": 4,
              "path": "menuManage",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children', // 子级
        label: 'menuName' // 名称
      }
    }
  },
  mounted () {
    // 回显菜单
    this.setCheckedKeys()
  },
  methods: {
    // 提交数据
    getCheckedKeys () {
      // 获取子级的key
      const childMenu = this.$refs.tree.getCheckedKeys()
      // 获取父级的key
      const partMenu = this.$refs.tree.getHalfCheckedKeys()
      // 合并数据
      const menu = partMenu.concat(childMenu)
      console.log(menu)
    },

    // 回显菜单
    setCheckedKeys () {
      // 一般是调接口，拿到菜单数据和回显的菜单数组

      // 如果default-expand-all没有展开列表时，可以使用下面代码，设置展开所有行,
      // const nodesMap = this.$refs.tree.store.nodesMap
      // const keys = Object.keys(nodesMap)
      // keys.forEach(key => {
      //   nodesMap[key].expanded = true
      // })

      // 设置回显的菜单
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([3])
      })
    },
  }
}
</script>
<style lang="less" scoped>
.table {
  padding: 20px;
  min-height: 88vh;
  background: #fff;
  margin: 20px;
}
.menu-list {
  ::v-deep .el-tree {
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    .el-tree-node__expand-icon {
      display: none !important;
    }
    .el-tree-node {
      &.is-expanded,
      &.is-current,
      &.is-focusable {
        background-color: transparent !important;
      }
      .el-tree-node__content {
        background-color: transparent !important;
        &:hover {
          background-color: transparent !important;
        }
      }
    }
    > .el-tree-node {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      position: relative;
      > .el-tree-node__content {
        width: 300px;
        height: 100%;
        padding-left: 20px !important;
      }
      .el-tree-node__children {
        position: relative;
        &::after {
          content: ' ';
          display: block;
          width: 1px;
          height: 100%;
          border-left: 1px solid #ebeef5;
          position: absolute;
          left: 0px;
          top: 0px;
        }
        .el-tree-node {
          width: 350px;
          padding: 10px 0px;
        }
      }
    }
  }
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1038296.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Mybatis-分页插件

Mybatis-分页插件

Mybatis-分页插件 前言一、分页插件的使用步骤1.添加依赖2.配置分页插件3. 分页插件的使用 前言 可以通过分页插件在实现以下前端样式时更加方便&#xff1a; 首页 上一页 2 3 4 5 6 下一页 末页 limit index,pageSize pageSize&#xff1a;每页显示的条数 pageNum&#xff…
阅读更多...
TVP 专家谈腾讯云 Cloud Studio：开启云端开发新篇章

TVP 专家谈腾讯云 Cloud Studio：开启云端开发新篇章

点击链接了解详情 导语 | 近日&#xff0c;由腾讯云 TVP 团队倾力打造的TVP 吐槽大会第六期「腾讯云 Cloud Studio专场圆满落幕&#xff0c;6 位资深的 TVP 专家深度体验腾讯云 Cloud Studio 产品&#xff0c;提出了直击痛点的意见与建议&#xff0c;同时也充分肯定了腾讯云 Cl…
阅读更多...
虚拟机桥接模式下没有无线网卡选项

虚拟机桥接模式下没有无线网卡选项

我以为是雷电模拟器占用了网卡的缘故&#xff0c;但想起之前可能修改了无线网卡的某些内容&#xff0c;于是到网络属性里面查看。 如下所示&#xff0c;原来是之前我不小心把这个红箭头指向的项目取消勾选了。
阅读更多...
【数据结构】B树、B+树的知识点学习总结

【数据结构】B树、B+树的知识点学习总结

目录 1、B树 1.1 定义 1.2 特性 1.3 查找操作 1.4 插入操作 1.5 删除操作 2、B树 2.1 定义 2.2 特性 3、B树与B树的对比 1、B树 1.1 定义 B树是一种平衡树数据结构&#xff0c;用于存储和访问大量数据。B树的每个节点可以存储多个键值&#xff0c;节点中的键值按照…
阅读更多...
虚幻4学习笔记（15）读档 和存档 的实现

虚幻4学习笔记（15）读档 和存档 的实现

虚幻4学习笔记 读档存档 B站UP谌嘉诚课程&#xff1a;https://www.bilibili.com/video/BV164411Y732 读档 添加UI蓝图 SaveGame_UMG 添加Scroll Box 修改Scrollbar Thickness滚动条厚度 15 15 勾选 is variable 添加text 读档界面 添加背景模糊 添加UI蓝图 SaveGame_Slot …
阅读更多...
Linux初识+环境部署

Linux初识+环境部署

文章目录 版权声明Linux初识Linux的诞生Linux内核Linux发行版 环境部署vmcentosWSL-Ubuntu 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明&#xff0c;所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用&…
阅读更多...
100天精通Python（可视化篇）——第102天：Pyecharts绘制多种炫酷关系网图参数说明+代码实战

100天精通Python（可视化篇）——第102天：Pyecharts绘制多种炫酷关系网图参数说明+代码实战

文章目录 专栏导读一、关系网图介绍1. 关系网图是什么&#xff1f;2. 关系网图的应用场景 二、关系网图类配置选项1. 导包2. add函数3. 关系网络图的节点4. 关系网络图的边5. 节点分类的类目 三、关系网图实战1. 普通关系网图2. 复杂关系网图3. 带边信息的关系网络图4. 微博转发…
阅读更多...
2023 年解锁物联网端点安全

2023 年解锁物联网端点安全

物联网 (IoT) 和端点安全的融合已成为小型企业的关键焦点。这些企业正在努力保护其数字环境。物联网的集成彻底改变了运营流程。通过这样做&#xff0c;它们为创新和增长提供了前所未有的机会。然而&#xff0c;它也带来了无数的安全挑战&#xff0c;需要采取强有力的保护措施。…
阅读更多...
（一）NIO 基础

（一）NIO 基础

&#xff08;一&#xff09;NIO 基础 non-blocking io&#xff1a;非阻塞 IO 1、三大组件 1.1、Channel & Buffer Java NIO系统的核心在于&#xff1a;通道&#xff08;Channel&#xff09;和缓冲&#xff08;Buffer&#xff09;。通道表示打开到 IO 设备&#xff08;例…
阅读更多...
开关电源-交流220V降压电路-电阻电容降压原理

开关电源-交流220V降压电路-电阻电容降压原理

阻容降压原理 电容电阻降压的原理其实比较简单。它的工作原理是电容在交流信号的情况下&#xff0c;产生容抗来限制最大的工作电流。说白了就是电容使用它自己的通交流阻直流的性能&#xff0c;在交流信号输入时电容产生容抗。我们通过他的这个特性&#xff0c;可以设计出&…
阅读更多...
Java基础（一）——Hello World，8种数据类型，键盘录入

Java基础（一）——Hello World，8种数据类型，键盘录入

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…
阅读更多...
腾讯mini项目-【指标监控服务重构-会议记录】2023-07-21

腾讯mini项目-【指标监控服务重构-会议记录】2023-07-21

2023-07-21 组长会议纪要 A组 文档学习差不多&#xff0c;还没掌握如何使用sdk进行上报venus启动服务的3个ToDo 添加什么错误处理 ErrHandler &#xff1a; fiber的错误处理&#xff0c;是运行过程Handler中的错误&#xff0c;在全局的ErrHandler&#xff0c;进行错误处理&am…
阅读更多...
APP备案公钥，指纹获取

APP备案公钥，指纹获取

APP备案公钥&#xff0c;指纹获取 下载已有的apk&#xff0c;文件后缀名改为zip 2&#xff0c;找到META-INF文件夹&#xff0c;然后再找到文件CERT.RSA 后缀改名为CERT.p7b 3&#xff0c;双击后&#xff1a; 4&#xff0c;双击右侧证书点开&#xff1a;显示颁发给。 5&#xf…
阅读更多...
Unity引擎更新收费模式：从收入分成转向游戏安装量，将会有哪些影响呢

Unity引擎更新收费模式：从收入分成转向游戏安装量，将会有哪些影响呢

一、前言 Unity 引擎宣布自 2024 年 1 月 1 日起&#xff0c;将根据游戏安装量对开发者进行收费。官网通知如下 收费模式如图 这张图的大致意思就是&#xff0c; 从2024年1月1日开始&#xff0c;Unity将对所有达标的用户&#xff08;开发者&#xff09;根据游戏安装量征收“安…
阅读更多...
游戏扫码登录+多功能工具箱 微信小程序源码

游戏扫码登录+多功能工具箱 微信小程序源码

一个集合了多种实用功能的微信小程序&#xff0c;这个微信小程序源码不仅具备美观的界面设计&#xff0c;还拥有许多实用的功能&#xff0c;而且最重要的是&#xff0c;它无需服务器和域名&#xff0c;所有功能都无需API接口&#xff0c;因此不用担心功能失效的问题。这意味着&…
阅读更多...
移除元素【快慢指针】

移除元素【快慢指针】

移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新…
阅读更多...
刷题Day1

刷题Day1

目录 一、选择题二、编程题2.1 组队竞赛2.2 删除公共字符 一、选择题 二、编程题 2.1 组队竞赛 参考代码&#xff1a; #include <queue>int main() {priority_queue<int> pq;int n0;cin>>n;int tmp0;for(size_t i0;i<3*n;i){cin>>tmp;pq.push(tmp…
阅读更多...
YOLOv5、YOLOv8改进：Swin Transformer-V2

YOLOv5、YOLOv8改进：Swin Transformer-V2

1.介绍 论文地址&#xff1a;https://arxiv.org/abs/2111.09883 综述 该论文作者提出了缩放 Swin Transformer 的技术 多达 30 亿个参数&#xff0c;使其能够使用多达 1,536 个图像进行训练1,536 分辨率。通过扩大容量和分辨率&#xff0c;Swin Transformer 在四个具有代表性…
阅读更多...
Linux内核源码的make zImage过程

Linux内核源码的make zImage过程

一. 内核镜像文件 zImage 前面几篇文章重点讲 vmlinux 是如何编译出来的&#xff1f; vmlinux 是 ELF 格式的文件&#xff0c;但是在实 际中我们不会使用 vmlinux &#xff0c;而是使用 zImage 或 uImage 这样的 Linux 内核镜像文件。 本文简单说明一下 内核镜像文…
阅读更多...
【知识分享】Java获取全年每个月的有几周且每周是几号到几号

【知识分享】Java获取全年每个月的有几周且每周是几号到几号

加哥本周给大家分享一期怎么用java把全年每个月有几周&#xff0c;本周是几号到几号的工具类。便于大家根据需求获取想要的形式进行改造。话不多说&#xff0c;直接给大家上代码。 package com.techfantasy.common.utils; import com.techfantasy.common.entity.DateRange; i…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023