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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 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垃圾代码优化操作代码
2010/08/05 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
Javascript的this用法
2017/01/16 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
大学生求职工作的自我评价
2014/02/13 职场文书
《颐和园》教学反思
2014/02/26 职场文书
大学社团活动总结
2014/04/26 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
六年级学生评语大全
2014/12/26 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书