vue如何获取tree当前选中的节点_vue中element-ui 树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
出处:
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)...相关推荐
- elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中. 由 ...
- element组件树形控件el-tree点击展开节点,节点重影
本来想传视频看的清除一些,传不了视频,改gif格式还要下载软件算了 算了,凭手速截了这一张图. 先发现问题与解决 1.我是调用接口的时候发现的,有超级多的数据,本来以为我是数据多才出现这种问题, 2. ...
- wpf展开树节点_WPF中展开一个TreeView控件的所有树节点
在 Windows Form 应用中,我们碰到需要展开一个TreeView 控件的所有树节点的时候很简单,微软已经替我们提供了ExpandAll 方法,我们只要简单的一行代码tv_QTree.Expa ...
- element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...
- jQuery MiniUI 开发教程 树形控件 树操作:自定义节点(九)
[b]自定义节点[/b] [img]http://www.miniui.com/docs/api/images/drawnode.gif[/img] 参考示例:[url=http://www.mini ...
- VS2010/MFC编程入门之三十(常用控件:树形控件Tree Control 上)
前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介 树形控件在Windows系统中是很常见的,例如资源管理器左侧的 ...
- 树形控件Tree Control
树形控件Tree Control 前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介 树形控件在Windows系统 ...
最新文章
- 那些想坐等AI成熟再采用的公司,可能永远也跟不上AI浪潮
- xampp无法启动apache,提示terminating worker thread 0
- 为sap的alv的最左侧添加【选中】按钮用于同时选中多行...
- 服务器自检后显示scsi,请问一下,如何检测SCSI +RAID 5设置是否正确??
- WiFi 热点共享设置
- mariadb java_java 连接mariadb 无法获取数据源的问题,在ubuntu上部署的时候(原创)...
- Android 图片处理方法大全
- 夺命雷公狗---微信开发18----删除自定义菜单
- OpenCasCade将鼠标点映射到OCC三维视图中的三维点(鼠标点转换为OCC三维坐标)
- C# AES填充加密解密
- Fastdfs 分布式文件管理系统
- 家政上门预约服务小程序源码+前端后端
- Python Pandas缺失值处理
- 迷失在Blog(ZZ)
- 为什么业务中很少用到设计模式
- 银汇通无线pos机的优势与区别
- CAD中如何快速等分一条直线或曲线?教程详解
- C++:编程题:魔兽世界之一:备战
- CDH 6系列(CDH 6.0.0、CDH 6.1.0、CDH 6.2.0等)安装和使用
- java毕业设计大众点评管理系统Mybatis+系统+数据库+调试部署
热门文章
- Python 中 异步协程 的 使用方法介绍
- 掌控谈话~拔刺(说出你对我的指控)
- 将文件内含有的特殊字符还原
- html里table的scope,HTML表格的运用
- android 来电模式设置,android在root模式下接听来电的方法
- 外设驱动库开发笔记0:EPD总体设计
- Python小练习1:.txt文件常用读写操作
- word2vector数据集样式_这样做数据可视化驾驶舱,高端大气,一目了然,领导不点赞都难...
- 为什么到处都在推python_Python为什么能取得越来越超然的地位
- ad16自动布线设置规则_设计 | 18种pcb设计特殊布线的画法与技巧!