• el-tree实现表格方式菜单

    2.  
    3. <script>
    4. export default {
    5.   data () {
    6.     return {
    7.       list: [
    8.         {
    9.           "menuId": 1,
    10.           "menuName": "首页(首页)",
    11.           "menuCode": "首页",
    12.           "parentId": 0,
    13.           "orderNum": 0,
    14.           "path": "/page",
    15.           "component": null,
    16.           "query": null,
    17.           "isFrame": 0,
    18.           "isCache": 0,
    19.           "menuType": 0,
    20.           "visible": 1,
    21.           "perms": null,
    22.           "icon": "iconfont icon-shouye",
    23.           "status": 1,
    24.           "remark": null,
    25.           "roleId": null,
    26.           "selected": true,
    27.           "level": 1,
    28.           "children": [
    29.             {
    30.               "menuId": 2,
    31.               "menuName": "首页(首页)",
    32.               "menuCode": "首页",
    33.               "parentId": 1,
    34.               "orderNum": 1,
    35.               "path": "/welcome",
    36.               "component": null,
    37.               "query": null,
    38.               "isFrame": 0,
    39.               "isCache": 0,
    40.               "menuType": 1,
    41.               "visible": 1,
    42.               "perms": null,
    43.               "icon": "",
    44.               "status": 1,
    45.               "remark": null,
    46.               "roleId": null,
    47.               "selected": true,
    48.               "level": 2,
    49.               "children": null
    50.             }
    51.           ]
    52.         },
    53.         {
    54.           "menuId": 3,
    55.           "menuName": "随访数据查询(随访数据查询)",
    56.           "menuCode": "随访数据查询",
    57.           "parentId": 0,
    58.           "orderNum": 1,
    59.           "path": "/followUpDataQuery",
    60.           "component": null,
    61.           "query": null,
    62.           "isFrame": 0,
    63.           "isCache": 0,
    64.           "menuType": 0,
    65.           "visible": 1,
    66.           "perms": null,
    67.           "icon": "iconfont icon-shengwuxuejiance",
    68.           "status": 1,
    69.           "remark": null,
    70.           "roleId": null,
    71.           "selected": true,
    72.           "level": 1,
    73.           "children": [
    74.             {
    75.               "menuId": 4,
    76.               "menuName": "随访数据查询(随访数据查询)",
    77.               "menuCode": "随访数据查询",
    78.               "parentId": 3,
    79.               "orderNum": 1,
    80.               "path": "index",
    81.               "component": null,
    82.               "query": null,
    83.               "isFrame": 0,
    84.               "isCache": 0,
    85.               "menuType": 1,
    86.               "visible": 1,
    87.               "perms": null,
    88.               "icon": "",
    89.               "status": 1,
    90.               "remark": null,
    91.               "roleId": null,
    92.               "selected": true,
    93.               "level": 2,
    94.               "children": null
    95.             },
    96.             {
    97.               "menuId": 5,
    98.               "menuName": "随访详情(随访详情)",
    99.               "menuCode": "随访详情",
    100.               "parentId": 3,
    101.               "orderNum": 2,
    102.               "path": "detail",
    103.               "component": null,
    104.               "query": null,
    105.               "isFrame": 0,
    106.               "isCache": 0,
    107.               "menuType": 1,
    108.               "visible": 1,
    109.               "perms": null,
    110.               "icon": "",
    111.               "status": 1,
    112.               "remark": null,
    113.               "roleId": null,
    114.               "selected": true,
    115.               "level": 2,
    116.               "children": null
    117.             }
    118.           ]
    119.         },
    120.         {
    121.           "menuId": 21,
    122.           "menuName": "此单名称(11)",
    123.           "menuCode": "11",
    124.           "parentId": 0,
    125.           "orderNum": 1,
    126.           "path": "请问请问饿```",
    127.           "component": null,
    128.           "query": null,
    129.           "isFrame": 0,
    130.           "isCache": 0,
    131.           "menuType": 0,
    132.           "visible": 1,
    133.           "perms": null,
    134.           "icon": "321",
    135.           "status": 1,
    136.           "remark": null,
    137.           "roleId": null,
    138.           "selected": true,
    139.           "level": 1,
    140.           // "children": null
    141.         },
    142.         {
    143.           "menuId": 6,
    144.           "menuName": "调查数据查询(调查数据查询)",
    145.           "menuCode": "调查数据查询",
    146.           "parentId": 0,
    147.           "orderNum": 2,
    148.           "path": "/surveyDataQuery",
    149.           "component": null,
    150.           "query": null,
    151.           "isFrame": 0,
    152.           "isCache": 0,
    153.           "menuType": 0,
    154.           "visible": 1,
    155.           "perms": null,
    156.           "icon": "iconfont icon-shaichaxinxichaxun",
    157.           "status": 1,
    158.           "remark": null,
    159.           "roleId": null,
    160.           "selected": true,
    161.           "level": 1,
    162.           "children": [
    163.             {
    164.               "menuId": 7,
    165.               "menuName": "调查数据查询(调查数据查询)",
    166.               "menuCode": "调查数据查询",
    167.               "parentId": 6,
    168.               "orderNum": 1,
    169.               "path": "index",
    170.               "component": null,
    171.               "query": null,
    172.               "isFrame": 0,
    173.               "isCache": 0,
    174.               "menuType": 1,
    175.               "visible": 1,
    176.               "perms": null,
    177.               "icon": "",
    178.               "status": 1,
    179.               "remark": null,
    180.               "roleId": null,
    181.               "selected": true,
    182.               "level": 2,
    183.               "children": null
    184.             },
    185.             {
    186.               "menuId": 8,
    187.               "menuName": "新建问卷(新建问卷)",
    188.               "menuCode": "新建问卷",
    189.               "parentId": 6,
    190.               "orderNum": 2,
    191.               "path": "evaluationreport",
    192.               "component": null,
    193.               "query": null,
    194.               "isFrame": 0,
    195.               "isCache": 0,
    196.               "menuType": 1,
    197.               "visible": 1,
    198.               "perms": null,
    199.               "icon": "",
    200.               "status": 1,
    201.               "remark": null,
    202.               "roleId": null,
    203.               "selected": true,
    204.               "level": 2,
    205.               "children": null
    206.             },
    207.             {
    208.               "menuId": 9,
    209.               "menuName": "随访详情(随访详情)",
    210.               "menuCode": "随访详情",
    211.               "parentId": 6,
    212.               "orderNum": 3,
    213.               "path": "evaluationlook",
    214.               "component": null,
    215.               "query": null,
    216.               "isFrame": 0,
    217.               "isCache": 0,
    218.               "menuType": 1,
    219.               "visible": 1,
    220.               "perms": null,
    221.               "icon": "",
    222.               "status": 1,
    223.               "remark": null,
    224.               "roleId": null,
    225.               "selected": true,
    226.               "level": 2,
    227.               "children": null
    228.             }
    229.           ]
    230.         },
    231.         {
    232.           "menuId": 10,
    233.           "menuName": "任务配置(任务配置)",
    234.           "menuCode": "任务配置",
    235.           "parentId": 0,
    236.           "orderNum": 3,
    237.           "path": "/taskSet",
    238.           "component": null,
    239.           "query": null,
    240.           "isFrame": 0,
    241.           "isCache": 0,
    242.           "menuType": 0,
    243.           "visible": 1,
    244.           "perms": null,
    245.           "icon": "iconfont icon-renwuguanli",
    246.           "status": 1,
    247.           "remark": null,
    248.           "roleId": null,
    249.           "selected": true,
    250.           "level": 1,
    251.           "children": [
    252.             {
    253.               "menuId": 11,
    254.               "menuName": "任务配置(任务配置)",
    255.               "menuCode": "任务配置",
    256.               "parentId": 10,
    257.               "orderNum": 1,
    258.               "path": "index",
    259.               "component": null,
    260.               "query": null,
    261.               "isFrame": 0,
    262.               "isCache": 0,
    263.               "menuType": 1,
    264.               "visible": 1,
    265.               "perms": null,
    266.               "icon": "",
    267.               "status": 1,
    268.               "remark": null,
    269.               "roleId": null,
    270.               "selected": true,
    271.               "level": 2,
    272.               "children": null
    273.             }
    274.           ]
    275.         },
    276.         {
    277.           "menuId": 12,
    278.           "menuName": "数据统计(数据统计)",
    279.           "menuCode": "数据统计",
    280.           "parentId": 0,
    281.           "orderNum": 4,
    282.           "path": "/dataStatistics",
    283.           "component": null,
    284.           "query": null,
    285.           "isFrame": 0,
    286.           "isCache": 0,
    287.           "menuType": 0,
    288.           "visible": 1,
    289.           "perms": null,
    290.           "icon": "iconfont icon-shujutongji",
    291.           "status": 1,
    292.           "remark": null,
    293.           "roleId": null,
    294.           "selected": true,
    295.           "level": 1,
    296.           "children": [
    297.             {
    298.               "menuId": 13,
    299.               "menuName": "数据统计(数据统计)",
    300.               "menuCode": "数据统计",
    301.               "parentId": 12,
    302.               "orderNum": 1,
    303.               "path": "index",
    304.               "component": null,
    305.               "query": null,
    306.               "isFrame": 0,
    307.               "isCache": 0,
    308.               "menuType": 1,
    309.               "visible": 1,
    310.               "perms": null,
    311.               "icon": "",
    312.               "status": 1,
    313.               "remark": null,
    314.               "roleId": null,
    315.               "selected": true,
    316.               "level": 2,
    317.               "children": null
    318.             }
    319.           ]
    320.         },
    321.         {
    322.           "menuId": 14,
    323.           "menuName": "数据导出(数据导出)",
    324.           "menuCode": "数据导出",
    325.           "parentId": 0,
    326.           "orderNum": 5,
    327.           "path": "/dataExport",
    328.           "component": null,
    329.           "query": null,
    330.           "isFrame": 0,
    331.           "isCache": 0,
    332.           "menuType": 0,
    333.           "visible": 1,
    334.           "perms": null,
    335.           "icon": "iconfont icon-suifangrenwuguanli",
    336.           "status": 1,
    337.           "remark": null,
    338.           "roleId": null,
    339.           "selected": true,
    340.           "level": 1,
    341.           "children": [
    342.             {
    343.               "menuId": 15,
    344.               "menuName": "数据导出(数据导出)",
    345.               "menuCode": "数据导出",
    346.               "parentId": 14,
    347.               "orderNum": 1,
    348.               "path": "index",
    349.               "component": null,
    350.               "query": null,
    351.               "isFrame": 0,
    352.               "isCache": 0,
    353.               "menuType": 1,
    354.               "visible": 1,
    355.               "perms": null,
    356.               "icon": "",
    357.               "status": 1,
    358.               "remark": null,
    359.               "roleId": null,
    360.               "selected": true,
    361.               "level": 2,
    362.               "children": null
    363.             }
    364.           ]
    365.         },
    366.         {
    367.           "menuId": 16,
    368.           "menuName": "系统管理(系统管理)",
    369.           "menuCode": "系统管理",
    370.           "parentId": 0,
    371.           "orderNum": 6,
    372.           "path": "/systemManage",
    373.           "component": null,
    374.           "query": null,
    375.           "isFrame": 0,
    376.           "isCache": 0,
    377.           "menuType": 0,
    378.           "visible": 1,
    379.           "perms": null,
    380.           "icon": "iconfont icon-xitongguanli",
    381.           "status": 1,
    382.           "remark": null,
    383.           "roleId": null,
    384.           "selected": true,
    385.           "level": 1,
    386.           "children": [
    387.             {
    388.               "menuId": 17,
    389.               "menuName": "用户管理(用户管理)",
    390.               "menuCode": "用户管理",
    391.               "parentId": 16,
    392.               "orderNum": 1,
    393.               "path": "usersManage",
    394.               "component": null,
    395.               "query": null,
    396.               "isFrame": 0,
    397.               "isCache": 0,
    398.               "menuType": 1,
    399.               "visible": 1,
    400.               "perms": null,
    401.               "icon": "",
    402.               "status": 1,
    403.               "remark": null,
    404.               "roleId": null,
    405.               "selected": true,
    406.               "level": 2,
    407.               "children": null
    408.             },
    409.             {
    410.               "menuId": 18,
    411.               "menuName": "角色管理(角色管理)",
    412.               "menuCode": "角色管理",
    413.               "parentId": 16,
    414.               "orderNum": 2,
    415.               "path": "roleManage",
    416.               "component": null,
    417.               "query": null,
    418.               "isFrame": 0,
    419.               "isCache": 0,
    420.               "menuType": 1,
    421.               "visible": 1,
    422.               "perms": null,
    423.               "icon": "",
    424.               "status": 1,
    425.               "remark": null,
    426.               "roleId": null,
    427.               "selected": true,
    428.               "level": 2,
    429.               "children": null
    430.             },
    431.             {
    432.               "menuId": 19,
    433.               "menuName": "权限配置(权限配置)",
    434.               "menuCode": "权限配置",
    435.               "parentId": 16,
    436.               "orderNum": 3,
    437.               "path": "permissionSetting",
    438.               "component": null,
    439.               "query": null,
    440.               "isFrame": 0,
    441.               "isCache": 0,
    442.               "menuType": 1,
    443.               "visible": 1,
    444.               "perms": null,
    445.               "icon": "",
    446.               "status": 1,
    447.               "remark": null,
    448.               "roleId": null,
    449.               "selected": true,
    450.               "level": 2,
    451.               "children": null
    452.             },
    453.             {
    454.               "menuId": 20,
    455.               "menuName": "菜单管理(菜单管理)",
    456.               "menuCode": "菜单管理",
    457.               "parentId": 16,
    458.               "orderNum": 4,
    459.               "path": "menuManage",
    460.               "component": null,
    461.               "query": null,
    462.               "isFrame": 0,
    463.               "isCache": 0,
    464.               "menuType": 1,
    465.               "visible": 1,
    466.               "perms": null,
    467.               "icon": "",
    468.               "status": 1,
    469.               "remark": null,
    470.               "roleId": null,
    471.               "selected": true,
    472.               "level": 2,
    473.               "children": null
    474.             }
    475.           ]
    476.         }
    477.       ],
    478.       defaultProps: {
    479.         children: 'children', // 子级
    480.         label: 'menuName' // 名称
    481.       }
    482.     }
    483.   },
    484.   mounted () {
    485.     // 回显菜单
    486.     this.setCheckedKeys()
    487.   },
    488.   methods: {
    489.     // 提交数据
    490.     getCheckedKeys () {
    491.       // 获取子级的key
    492.       const childMenu = this.$refs.tree.getCheckedKeys()
    493.       // 获取父级的key
    494.       const partMenu = this.$refs.tree.getHalfCheckedKeys()
    495.       // 合并数据
    496.       const menu = partMenu.concat(childMenu)
    497.       console.log(menu)
    498.     },
    499.  
    500.     // 回显菜单
    501.     setCheckedKeys () {
    502.       // 一般是调接口，拿到菜单数据和回显的菜单数组
    503.  
    504.       // 如果default-expand-all没有展开列表时，可以使用下面代码，设置展开所有行,
    505.       // const nodesMap = this.$refs.tree.store.nodesMap
    506.       // const keys = Object.keys(nodesMap)
    507.       // keys.forEach(key => {
    508.       //   nodesMap[key].expanded = true
    509.       // })
    510.  
    511.       // 设置回显的菜单
    512.       this.$nextTick(() => {
    513.         this.$refs.tree.setCheckedKeys([3])
    514.       })
    515.     },
    516.   }
    517. }
    518. script>
    519. <style lang="less" scoped>
    520. .table {
    521.   padding: 20px;
    522.   min-height: 88vh;
    523.   background: #fff;
    524.   margin: 20px;
    525. }
    526. .menu-list {
    527.   ::v-deep .el-tree {
    528.     border-top: 1px solid #ebeef5;
    529.     border-left: 1px solid #ebeef5;
    530.     border-right: 1px solid #ebeef5;
    531.     .el-tree-node__expand-icon {
    532.       display: none !important;
    533.     }
    534.     .el-tree-node {
    535.       &.is-expanded,
    536.       &.is-current,
    537.       &.is-focusable {
    538.         background-color: transparent !important;
    539.       }
    540.       .el-tree-node__content {
    541.         background-color: transparent !important;
    542.         &:hover {
    543.           background-color: transparent !important;
    544.         }
    545.       }
    546.     }
    547.     > .el-tree-node {
    548.       display: flex;
    549.       align-items: center;
    550.       border-bottom: 1px solid #ebeef5;
    551.       position: relative;
    552.       > .el-tree-node__content {
    553.         width: 300px;
    554.         height: 100%;
    555.         padding-left: 20px !important;
    556.       }
    557.       .el-tree-node__children {
    558.         position: relative;
    559.         &::after {
    560.           content: ' ';
    561.           display: block;
    562.           width: 1px;
    563.           height: 100%;
    564.           border-left: 1px solid #ebeef5;
    565.           position: absolute;
    566.           left: 0px;
    567.           top: 0px;
    568.         }
    569.         .el-tree-node {
    570.           width: 350px;
    571.           padding: 10px 0px;
    572.         }
    573.       }
    574.     }
    575.   }
    576. }
    577. style>

  • 相关阅读:
    Vue(第十七课)AXIOS对JSON数据的增删改查
    Java-基于SSM的体育竞赛成绩管理系统
    antv x6让拖拽控件工具箱悬浮在画布上，工具箱区域鼠标按下不生成节点
    高效解决git中的冲突
    Flink 启用与配置检查点 Checkpoint
    Git Gui的使用+关于SSH协议和克隆对应文件代码＋IDEA集成Git等
    Rasa 使用ResponseSelector实现FAQ和闲聊
    一个惊为天人的验证思路（验证数学公式是否正确）
    springboot水环境检测系统的设计与实现毕业设计源码041446
    基于matlab的精馏塔作业模拟仿真
  • 原文地址：https://blog.csdn.net/qq_41588991/article/details/133243951