elementUI 树状图点击子节点获取父节点

Z时代
2024-01-10
分类：技术分享

权限使用elementUI tree 组件，点击子节点获取对应多级的父节点

  这是应用的组件
<el-tree
:data="hovePermissData"
:default-checked-                                       keys='checkEditorData'
@check-change="treeNodeEditor"
:show-checkbox='true'
:indent="40"
default-expand-all
node-key="number"
ref="tree"
highlight-current
:props="defaultPropsEditor"></el-tree>

这是数据结构 [ { "name": "监控中心", "number": 1, "title": "monitor", "route": "", "source_type": "0", "status": "on", "sub_rule": [ ], "switchStatus": true }, { "name": "用户管理", "number": 2, "title": "passenger", "route": "", "source_type": "0", "status": "on", "sub_rule": [ { "name": "用户列表", "number": 12, "title": "passenger_list", "route": "/v1/passenger/list", "source_type": "0", "status": "on", "sub_rule": [ { "name": "编辑乘客信息", "number": 36, "title": "", "route": "/v1/passenger/edit-passenger", "source_type": "1", "status": "on", "sub_rule": [ ], "switchStatus": true } ], "switchStatus": true }, { "name": "用户登录日志", "number": 13, "title": "passenger_login_log", "route": "/v1/passenger/login-log", "source_type": "0", "status": "on", "sub_rule": [ ], "switchStatus": true } ], "switchStatus": true }, { "name": "司机管理", "number": 3, "title": "driver", "route": "", "source_type": "0", "status": "on", "sub_rule": [ { "name": "司机列表", "number": 14, "title": "driver_list", "route": "/v1/driver/list,/v1/franchisee/list", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑司机信息", "number": 37, "title": "", "route": "/v1/driver/edit-driver", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "司机审核", "number": 15, "title": "driver_auth", "route": "/v1/driver/driver-auth-list,/v1/franchisee/list", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑司机审核", "number": 38, "title": "", "route": "/v1/driver/edit-driver-auth", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "司机资质列表", "number": 72, "title": "", "route": "/v1/driver/qualification-list", "source_type": "0", "status": "off", "sub_rule": [ { "name": "审核司机资质", "number": 73, "title": "", "route": "/v1/driver/edit-qualification", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false } ], "switchStatus": true }, { "name": "车辆管理", "number": 4, "title": "car", "route": "", "source_type": "0", "status": "on", "sub_rule": [ { "name": "车辆列表", "number": 16, "title": "car_list", "route": "/v1/car/list", "source_type": "0", "status": "on", "sub_rule": [ ], "switchStatus": true }, { "name": "车辆审核", "number": 17, "title": "car_auth", "route": "/v1/car/car-auth", "source_type": "0", "status": "on", "sub_rule": [ ], "switchStatus": true } ], "switchStatus": true }, { "name": "运营管理", "number": 5, "title": "operation", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "城市管理", "number": 18, "title": "operation_city", "route": "/v1/operation/city/city", "source_type": "0", "status": "off", "sub_rule": [ { "name": "车型开放", "number": 28, "title": "operation_city_service", "route": "/v1/operation/city/service", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑车型开放", "number": 39, "title": "", "route": "/v1/operation/city/service", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "车型配置", "number": 29, "title": "operation_city_car", "route": "/v1/operation/city/car-config", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑车型配置", "number": 40, "title": "", "route": "/v1/operation/city/car-config", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "抽成配置", "number": 30, "title": "operation_city_commission", "route": "/v1/operation/city/commission-config", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑抽成配置", "number": 41, "title": "", "route": "/v1/operation/city/commission-config", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "动态折扣", "number": 31, "title": "operation_city_dynamic", "route": "/v1/operation/city/dynamic-config,/v1/operation/city/service", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑动态折扣", "number": 42, "title": "", "route": "/v1/operation/city/dynamic-config", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "优惠券配置", "number": 32, "title": "operation_city_coupon", "route": "/v1/operation/coupon/coupon", "source_type": "0", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "司机等级", "number": 19, "title": "operation_driver", "route": "/v1/operation/driver/driver-level", "source_type": "0", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "优惠券", "number": 20, "title": "operation_coupon", "route": "/v1/operation/city/coupon-list", "source_type": "0", "status": "off", "sub_rule": [ { "name": "添加城市券", "number": 43, "title": "", "route": "/v1/operation/city/add-coupon", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "编辑城市券", "number": 44, "title": "", "route": "/v1/operation/city/edit-coupon", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "消息管理", "number": 21, "title": "operation_message", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "司机消息", "number": 33, "title": "operation_message_driver", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "司机个人消息", "number": 51, "title": "", "route": "/v1/operation/message/driver-message", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑司机个人消息", "number": 74, "title": "", "route": "/v1/operation/message/edit-driver-message", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "添加司机个人消息", "number": 78, "title": "", "route": "/v1/operation/message/add-driver-message", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "司机系统消息", "number": 52, "title": "", "route": "/v1/operation/message/driver-system-message", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑司机系统消息", "number": 75, "title": "", "route": "/v1/operation/message/driver-system-message,/v1/operation/city/city", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "添加司机系统消息", "number": 79, "title": "", "route": "/v1/operation/message/add-driver-system-message,/v1/operation/city/city", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false } ], "switchStatus": false }, { "name": "加盟商消息", "number": 34, "title": "operation_message_franchisee", "route": "", "source_type": "0", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "乘客消息", "number": 35, "title": "operation_message_passenger", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "乘客个人消息", "number": 53, "title": "", "route": "/v1/operation/message/passenger-message", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑乘客个人消息", "number": 76, "title": "", "route": "/v1/operation/message/passenger-message", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "添加乘客个人消息", "number": 80, "title": "", "route": "/v1/operation/message/add-passenger-message", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "乘客系统消息", "number": 54, "title": "", "route": "/v1/operation/message/passenger-system-message", "source_type": "0", "status": "off", "sub_rule": [ { "name": "编辑乘客系统消息", "number": 77, "title": "", "route": "/v1/operation/message/passenger-system-message,/v1/operation/city/city", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "添加乘客系统消息", "number": 81, "title": "", "route": "/v1/operation/message/add-passenger-system-message,/v1/operation/city/city", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false } ], "switchStatus": false } ], "switchStatus": false } ], "switchStatus": false }, { "name": "订单管理", "number": 6, "title": "order", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "订单列表", "number": 47, "title": "", "route": "/v1/order/list", "source_type": "0", "status": "off", "sub_rule": [ { "name": "订单详情", "number": 45, "title": "", "route": "/v1/order/details,/v1/order/track", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "修改订单", "number": 46, "title": "", "route": "/v1/order/edit-order", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "平台垫付", "number": 62, "title": "", "route": "/v1/order/pay-order", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "下载订单", "number": 63, "title": "", "route": "/v1/order/upload", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false } ], "switchStatus": false }, { "name": "财务管理", "number": 7, "title": "finance", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "财务统计", "number": 22, "title": "finance_home", "route": "/v1/passenger/list", "source_type": "0", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "司机提现", "number": 23, "title": "finance_driver_cashout", "route": "/v1/finance/driver-cashout", "source_type": "0", "status": "off", "sub_rule": [ { "name": "拒绝司机提现", "number": 64, "title": "", "route": "/v1/finance/refuse-driver-cashout", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "同意司机提现", "number": 65, "title": "", "route": "/v1/finance/agree-driver-cashout", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "加盟商提现", "number": 24, "title": "finance_franchisee_cashout", "route": "", "source_type": "0", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "加盟商管理", "number": 8, "title": "franchisee", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "加盟商列表", "number": 25, "title": "franchisee_list", "route": "/v1/franchisee/list", "source_type": "0", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "投诉管理", "number": 9, "title": "complaint", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "司机投诉", "number": 26, "title": "complaint_driver", "route": "/v1/complaint/driver-complaint", "source_type": "0", "status": "off", "sub_rule": [ { "name": "司机投诉进度", "number": 66, "title": "", "route": "/v1/complaint/driver-complaint-progress", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "编辑司机投诉", "number": 67, "title": "", "route": "/v1/complaint/edit-driver-complaint", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "添加司机投诉", "number": 68, "title": "", "route": "/v1/complaint/add-driver-complaint", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "乘客投诉", "number": 27, "title": "complaint_passenger", "route": "/v1/complaint/passenger-complaint", "source_type": "0", "status": "off", "sub_rule": [ { "name": "乘客投诉进度", "number": 69, "title": "", "route": "/v1/complaint/passenger-complaint-progress", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "编辑乘客投诉", "number": 70, "title": "", "route": "/v1/complaint/edit-passenger-complaint", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "添加乘客投诉", "number": 71, "title": "", "route": "/v1/complaint/add-passenger-complaint", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false } ], "switchStatus": false }, { "name": "权限管理", "number": 10, "title": "permission", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "用户组管理", "number": 48, "title": "", "route": "/v1/permission/role/list,/v1/permission/role/all", "source_type": "0", "status": "off", "sub_rule": [ { "name": "修改用户组", "number": 49, "title": "", "route": "/v1/permission/role/edit-role", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "添加用户组", "number": 50, "title": "", "route": "/v1/permission/role/add-role,/v1/permission/role/all", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "用户组详情", "number": 55, "title": "", "route": "/v1/permission/role/details", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "编辑用户组权限", "number": 59, "title": "", "route": "/v1/permission/role/edit-role-permission,/v1/permission/role/all", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }, { "name": "账号管理", "number": 56, "title": "", "route": "/v1/permission/manager/list", "source_type": "0", "status": "off", "sub_rule": [ { "name": "添加账号", "number": 57, "title": "", "route": "/v1/permission/role/add-manager,/v1/permission/role/list,/v1/operation/city/city", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "编辑账号", "number": 58, "title": "", "route": "/v1/permission/manager/edit-manager", "source_type": "1", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false } ], "switchStatus": false }, { "name": "日志管理", "number": 11, "title": "log", "route": "", "source_type": "0", "status": "off", "sub_rule": [ { "name": "管理员登录日志", "number": 60, "title": "", "route": "/v1/log/login-list", "source_type": "0", "status": "off", "sub_rule": [ ], "switchStatus": false }, { "name": "管理员操作日志", "number": 61, "title": "", "route": "/v1/log/operation-list", "source_type": "0", "status": "off", "sub_rule": [ ], "switchStatus": false } ], "switchStatus": false }

]

回答

@node-click=(data,node)=>...，node包含了parent，自己写个while拿所有的parent即可

// 根据子节点id查询所有父节点id
function getParent (array, key) {
  let result = [];
  let toToo = true;
  const catchData = (array, key) => {
    array.forEach( item => {
      if (!toToo) return;
      result.push(String(item['id']));
      if (item['id'] === key) {
        toToo = false;
      } else if (item['children']) {
        catchData(item['children'], key);
      } else {
        result.pop();
      }
    });
    toToo && result.pop();
  };
  catchData(array, key);
  return result;}