出处:

Element-ui官网给的方法

getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); },

1

这种只有在所有子级都被选中的情况下才能获得父级的id,如果不选中所有的子级那么获取得到的id就只有子级的。但是一般提交数据时后台都需要父级id的。

有两种方法解决:

1 ,找到项目中的\node_modules\element-ui\lib\element-ui.common.js文件

2,搜索文件中的TreeStore.prototype.getCheckedNodes方法中的

if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {

checkedNodes.push(child.data);

}

1

2

3

3,修改为

if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {

checkedNodes.push(child.data);

}

1

2

3

4,然后重启项目

console.log(this.$refs.tree.getCheckedKeys());就可以拿到父节点的ID啦

第二种方法:复制代码

代码:要有pid:xxx

methods: {

getCheckedNodes() {

var rad=''

var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串

var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}

ridsb.forEach(ids=>{//获取选中的所有的父级id

rad+=','+ids.pid

})

rad=rad.substr(1) // 删除字符串前面的','

var rids=rad+','+ridsa

var arr=rids.split(',')// 把字符串转换成数组

arr=[...new Set(arr)]; // 数组去重

rids=arr.join(',')// 把数组转换成字符串

console.log(rids)

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

测试代码

:data="data2"

show-checkbox

default-expand-all

node-key="id"

ref="tree"

highlight-current

:props="defaultProps">

获取

清空

export default {

methods: {

getCheckedNodes() {

var rad=''

var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串

var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}

ridsb.forEach(ids=>{//获取选中的所有的父级id

rad+=','+ids.pid

})

rad=rad.substr(1) // 删除字符串前面的','

var rids=rad+','+ridsa

var arr=rids.split(',')// 把字符串转换成数组

arr=[...new Set(arr)]; // 数组去重

rids=arr.join(',')// 把数组转换成字符串

console.log(rids)

},

resetChecked() {

this.$refs.tree.setCheckedKeys([]);

}

},

data() {

return {

data2: [{

pid:0,

path:xxxx,

id: 1,

label: '一级 1',

children: [{

pid:1,

path:xxxx,

id: 11,

label: '二级 1-1'

},

{

pid:1,

path:xxxx,

id: 12,

label: '二级 1-2'

},

{

pid:1,

path:xxxx,

id: 13,

label: '二级 1-3'

}]

}],

defaultProps: {

children: 'children',

label: 'label'

}

};

}

};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

如果是三级或者是多级,响应的数据格式必须要有’path:xxxx’,这样才能获取其父级id

响应的数据格式

{

"data": [

{

"id": 30,

"path": xxxx,

"children": [

{

"id": 101,

"path": xxxx,

"children": [

{

"id": 104,

"path": xxxx,

"children": [

{

"id": 105,

"path": xxxx

}

]

}

]

}

]

}

],

"meta": {

"msg": "获取成功",

"status": 200

}

}

vue如何获取tree当前选中的节点_vue中element-ui 树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...相关推荐

  1. elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)...

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...

  2. Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...

  3. element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...

    在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中. 由 ...

  4. element组件树形控件el-tree点击展开节点,节点重影

    本来想传视频看的清除一些,传不了视频,改gif格式还要下载软件算了 算了,凭手速截了这一张图. 先发现问题与解决 1.我是调用接口的时候发现的,有超级多的数据,本来以为我是数据多才出现这种问题, 2. ...

  5. wpf展开树节点_WPF中展开一个TreeView控件的所有树节点

    在 Windows Form 应用中,我们碰到需要展开一个TreeView 控件的所有树节点的时候很简单,微软已经替我们提供了ExpandAll 方法,我们只要简单的一行代码tv_QTree.Expa ...

  6. element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发

    本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...

  7. jQuery MiniUI 开发教程 树形控件 树操作:自定义节点(九)

    [b]自定义节点[/b] [img]http://www.miniui.com/docs/api/images/drawnode.gif[/img] 参考示例:[url=http://www.mini ...

  8. VS2010/MFC编程入门之三十(常用控件:树形控件Tree Control 上)

    前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介 树形控件在Windows系统中是很常见的,例如资源管理器左侧的 ...

  9. 树形控件Tree Control

    树形控件Tree Control 前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介 树形控件在Windows系统 ...

最新文章

  1. 那些想坐等AI成熟再采用的公司,可能永远也跟不上AI浪潮
  2. xampp无法启动apache,提示terminating worker thread 0
  3. 为sap的alv的最左侧添加【选中】按钮用于同时选中多行...
  4. 服务器自检后显示scsi,请问一下,如何检测SCSI +RAID 5设置是否正确??
  5. WiFi 热点共享设置
  6. mariadb java_java 连接mariadb 无法获取数据源的问题,在ubuntu上部署的时候(原创)...
  7. Android 图片处理方法大全
  8. 夺命雷公狗---微信开发18----删除自定义菜单
  9. OpenCasCade将鼠标点映射到OCC三维视图中的三维点(鼠标点转换为OCC三维坐标)
  10. C# AES填充加密解密
  11. Fastdfs 分布式文件管理系统
  12. 家政上门预约服务小程序源码+前端后端
  13. Python Pandas缺失值处理
  14. 迷失在Blog(ZZ)
  15. 为什么业务中很少用到设计模式
  16. 银汇通无线pos机的优势与区别
  17. CAD中如何快速等分一条直线或曲线?教程详解
  18. C++:编程题:魔兽世界之一:备战
  19. CDH 6系列(CDH 6.0.0、CDH 6.1.0、CDH 6.2.0等)安装和使用
  20. java毕业设计大众点评管理系统Mybatis+系统+数据库+调试部署

热门文章

  1. Python 中 异步协程 的 使用方法介绍
  2. 掌控谈话~拔刺(说出你对我的指控)
  3. 将文件内含有的特殊字符还原
  4. html里table的scope,HTML表格的运用
  5. android 来电模式设置,android在root模式下接听来电的方法
  6. 外设驱动库开发笔记0:EPD总体设计
  7. Python小练习1:.txt文件常用读写操作
  8. word2vector数据集样式_这样做数据可视化驾驶舱,高端大气,一目了然,领导不点赞都难...
  9. 为什么到处都在推python_Python为什么能取得越来越超然的地位
  10. ad16自动布线设置规则_设计 | 18种pcb设计特殊布线的画法与技巧!