vue treeselect获取当前选中项的label实例

2023-07-17 13:31:03 71

我就废话不多说了，大家还是直接看代码吧~

//获取当前选中部门的名称
selectDepart(val){
console.log('selectDepart',val)
this.formData.deptName=val.name
}

结果如下所示，可以获取到当前选中项的信息：

补充知识：vue中element-ui树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)

Element-ui官网给的方法

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

这种只有在所有子级都被选中的情况下才能获得父级的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);
}

3,修改为

if((child.checked||child.indeterminate)&&(!leafOnly||leafOnly&&child.isLeaf)){
checkedNodes.push(child.data);
}

4,然后重启项目

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

第二种方法:复制代码

代码:要有pid:xxx

methods:{
getCheckedNodes(){
varrad=''
varridsa=this.$refs.tree.getCheckedKeys().join(',')//获取当前的选中的数据[数组]-id,把数组转换成字符串
varridsb=this.$refs.tree.getCheckedNodes()//获取当前的选中的数据{对象}
ridsb.forEach(ids=>{//获取选中的所有的父级id
rad+=','+ids.pid
})
rad=rad.substr(1)//删除字符串前面的','
varrids=rad+','+ridsa
vararr=rids.split(',')//把字符串转换成数组
arr=[...newSet(arr)];//数组去重
rids=arr.join(',')//把数组转换成字符串
console.log(rids)
}
}

测试代码

如果是三级或者是多级,响应的数据格式必须要有'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
}
}

这里是引用~

以上这篇vuetreeselect获取当前选中项的label实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue treeselect获取当前选中项的label实例

热门推荐

随机推荐