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


Posted in Javascript onAugust 31, 2020

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

<treeselect :placeholder="$t('taskManage.lockTask.selDeptId')"
               :options="deptTree"
               :normalizer="normalizer"
               v-model="formData.deptId"
               @select="selectDepart">
</treeselect>
// 获取当前选中部门的名称
selectDepart(val) {
   console.log('selectDepart', val)
   this.formData.deptName = val.name
}

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

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

补充知识: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() {
    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)
   }
  }

测试代码

<template>
 <div>
  <el-tree
 :data="data2"
 show-checkbox
 default-expand-all
 node-key="id"
 ref="tree"
 highlight-current
 :props="defaultProps">
</el-tree>

<div class="buttons">
 <el-button @click="getCheckedNodes">获取</el-button>
 <el-button @click="resetChecked">清空</el-button>
</div>
 </div>
 </template>
 <script>
 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'
    }
   };
  }
 };
</script>
 </script>
 <style scoped>
 </style>

如果是三级或者是多级,响应的数据格式必须要有'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 treeselect获取当前选中项的label实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
潜说js对象和数组
May 25 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 #Javascript
搭建vscode+vue环境的详细教程
Aug 31 #Javascript
vue组件中实现嵌套子组件案例
Aug 31 #Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 #Javascript
详解vue v-model
Aug 31 #Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 #Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 #Javascript
You might like
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php异常处理方法实例汇总
2015/06/24 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php事件驱动化设计详解
2016/11/10 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
js读写json文件实例代码
2014/10/21 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
python字符串替换的2种方法
2014/11/30 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
儿童python练习实例
2018/05/27 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python实现多线程端口扫描
2019/08/31 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
介绍一下Java的事务处理
2012/12/07 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
村居抓节水倡议书
2014/05/19 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python