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

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

<强> vue中element-ui树形控件——树节点的选择(选中当前节点,获取当前id并且获取其父级id)

Element-ui官网给的方法

　　

getCheckedKeys () {console.log(这一点。refs.tree.getCheckedKeys美元());},

　　 　　

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

　　

　　

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

　　

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

　　 　　 　　如果孩子。检查,,(!leafOnly | | leafOnly,,child.isLeaf)) { 　　checkedNodes.push (child.data); 　　} 　　 　　

3,修改为

　　 　　 　　如果(孩子。检查| | child.indeterminate),,(!leafOnly | | leafOnly,,child.isLeaf)) { 　　checkedNodes.push (child.data); 　　} 　　 　　

4,然后重启项目

　　

　　

console.log(这一点。refs.tree.getCheckedKeys美元()),就可以拿到父节点的ID啦

　　 　　

<强>第二种方法:复制代码

　　

代码:要有pid: xxx

　　 　　 　　方法:{ 　　getCheckedNodes () { 　　var rad=" 　　var ridsa=? refs.tree.getCheckedKeys () . join(" ")//获取当前的选中的数据(数组)id,把数组转换成字符串 　　var ridsb=? refs.tree.getCheckedNodes()//获取当前的选中的数据{对象} 　　ridsb.forEach (id=祝辞{//获取选中的所有的父级id 　　rad +=', ' + ids.pid 　　}） 　　rad=rad.substr(1)//删除字符串前面的”、“ 　　var rid=rad +”、“+ ridsa 　　var arr=rids.split(" ")//把字符串转换成数组 　　arr=[…新设置(arr)];//数组去重 　　rid=arr.join(', ')//把数组转换成字符串 　　console.log (rid) 　　} 　　} 　　 　　

测试代码

　　 　　 　　& lt; template> 　　& lt; div> 　　& lt; el-tree 　　:数据=" https://www.yisu.com/zixun/data2 " 　　show-checkbox 　　default-expand-all 　　node-key=" id " 　　ref="树" 　　强调当前 　　祝辞:道具=" defaultProps”; 　　& lt;/el-tree> 　　 　　& lt; div类="按钮"比; 　　& lt; el-button @click=" getCheckedNodes "祝辞获取& lt;/el-button> 　　& lt; el-button @click=" resetChecked "祝辞清空& lt;/el-button> 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{ 　　方法:{ 　　getCheckedNodes () { 　　var rad=" 　　var ridsa=? refs.tree.getCheckedKeys () . join(" ")//获取当前的选中的数据(数组)id,把数组转换成字符串 　　var ridsb=? refs.tree.getCheckedNodes()//获取当前的选中的数据{对象} 　　ridsb.forEach (id=祝辞{//获取选中的所有的父级id 　　rad +=', ' + ids.pid 　　}） 　　rad=rad.substr(1)//删除字符串前面的”、“ 　　var rid=rad +”、“+ ridsa 　　var arr=rids.split(" ")//把字符串转换成数组 　　arr=[…新设置(arr)];//数组去重 　　rid=arr.join(', ')//把数组转换成字符串 　　console.log (rid) 　　}， 　　resetChecked () { 　　美元。refs.tree.setCheckedKeys ([]); 　　} 　　}， 　　 　　数据(){ 　　返回{ 　　data2: [{ 　　pid: 0, 　　路径:xxxx, 　　id: 1、 　　标签:“一级1 ', 　　孩子们:[{ 　　pid: 1、 　　路径:xxxx, 　　id: 11日 　　标签:“二级1 - 1的 　　}， 　　{ 　　pid: 1、 　　路径:xxxx, 　　id: 12, 　　标签:“二级1 - 2的 　　}， 　　{ 　　pid: 1、 　　路径:xxxx, 　　id: 13日 　　标签:“二1 - 3级的 　　}) 　　}), 　　defaultProps: { 　　孩子们:“孩子”, 　　标签:“标签” 　　} 　　}; 　　} 　　}; 　　& lt;/script> 　　& lt;/script> 　　& lt; scoped>风格; 　　& lt;/style> 　　

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