elementui tree获取父节点_elementUI 树状图 点击子节点获取父节点

在权限管理中,利用ElementUI的Tree组件,当点击子节点时,需要获取该子节点的所有上级父节点信息。本文介绍了如何在组件中设置并实现这一功能,包括数据结构和事件监听。
摘要由CSDN通过智能技术生成

权限使用elementUI 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">

这是数据结构

[

{

"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",</

### 回答1: 要获取 ElementUI Tree父节点,可以使用以下方法: 1. 使用 tree-node 的 $parent 属性获取父节点的实例对象。 例如,如果你有一个 tree-node 的实例对象 node,可以通过 node.$parent 获取它的父节点。 2. 使用 tree-node 的 $el 属性获取父节点的 DOM 元素。 例如,如果你有一个 tree-node 的实例对象 node,可以通过 node.$el.parentNode 获取它的父节点的 DOM 元素。 3. 使用 tree-node 的 $tree 属性获取整个 Tree 的实例对象,然后通过该实例对象的 getNode 方法获取父节点的实例对象。 例如,如果你有一个 tree-node 的实例对象 node,可以通过 node.$tree.getNode(node.parentId) 获取它的父节点的实例对象。 希望这些方法能够帮助你获取 ElementUI Tree父节点。 ### 回答2: ElementUI是一套基于Vue.js 2.0的桌面端组件库。该框架提供了多种UI组件,包括表单、弹窗、按钮、分页、树形结构等。其中,树形结构是一种常见的UI控件,用于展示多层级结构数据。在树形结构中,获取父节点是一项基本操作之一。 要获取ElementUI Tree组件中的父节点,首先需要知道该组件的结构和数据源。ElementUI Tree组件采用类似于DOM的层级结构,每个节点都包括一个父节点和多个子节点。该组件通常使用级联选择框绑定数据源,例如: ```html <el-cascader :options="options" v-model="selectedItems"></el-cascader> ``` 其中,`options`是一个数组,包括所有的节点信息;`selectedItems`是一个数组,存储当前选中节点的信息。 如果想要获取某个节点的父节点,可以使用`getCheckedNodes`方法获取当前选中的节点,然后遍历该节点的父节点即可。例如: ```javascript var tree = this.$refs.tree; var checkedNodes = tree.getCheckedNodes(); var parentNode = null; if (checkedNodes && checkedNodes.length > 0) { var selectedNode = checkedNodes[0]; var parentPath = selectedNode.path.slice(0, -1); parentNode = tree.getNodeByPath(parentPath); } ``` 该代码首先通过`this.$refs.tree`获取当前Tree组件实例,然后使用`getCheckedNodes`方法获取选中的节点数组。如果选中的节点不为空,就获取当前选中节点的父节点路径,并使用`getNodeByPath`方法查找该节点实例。最后将找到的父节点返回即可。 需要注意的是,如果节点数据源较大或者层级较深,遍历父节点的效率可能不高。因此,建议在设计数据源时,考虑将父节点信息和子节点信息一起存储,以提高获取父节点的效率。同时,也可以使用其他树形结构插件,例如Vue-Tree组件,提供更灵活的父节点查找方式。 ### 回答3: ElementUI 是一款基于 Vue.js 的框架,提供了很多实用的组件,其中树形控件是一个常用的组件。在 ElementUITree 组件中,获取父节点可以用 Tree 组件的方法 `getNode(parentKey: string | number): Node` 来实现。 该方法是异步的,并且返回一个 Promise 对象。它接收一个参数 parentKey,表示要获取父节点的 key 值,可以是一个字符串或数字。如果找到了该父节点,就会返回一个 Node 对象,否则返回 undefined。 在使用该方法时,首先需要引入 Tree 组件: ```js import { Tree } from 'element-ui'; ``` 然后在组件中使用 Tree 组件,并在方法中调用获取父节点的方法: ```html <template> <el-tree :data="data" ref="tree" :props="defaultProps" > </el-tree> </template> <script> export default { data() { return { data: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1', key: '1-1-1' } ] } ] } ], defaultProps: { children: 'children', label: 'label' } }; }, methods: { async getParentNode(key) { const tree = this.$refs.tree; const node = await tree.getNode(key); const parent = await node.parent; console.log(parent); } } }; </script> ``` 在该示例中,我们使用了一个嵌套的树形结构作为示例数据,然后在方法中调用了 `getNode` 方法获取到了我们想要的节点,并通过 `node.parent` 属性获取到了它的父节点,最后将其输出到控制台中。 需要注意的是,由于获取父节点是异步的,所以需要使用 async/await 来等待该方法的返回值。另外,由于该方法会返回一个 Promise 对象,所以需要使用 `await` 关键字来获取该方法的返回值。 综上所述,ElementUITree 组件提供了 `getNode` 方法来获取节点,通过获取到的节点可以方便地获取到它的父节点
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值