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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php 函数中使用static的说明
2012/06/01 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Python切片操作深入详解
2018/07/27 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python 中Operator模块的使用
2021/01/30 Python
数控技术专科生自我评价
2014/01/08 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
出生证明公证书
2014/04/09 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书