vue项目获取下拉框选中id_vue treeselect获取当前选中项的label实例
我就废话不多说了,大家还是直接看代码吧~
:options="deptTree"
:normalizer="normalizer"
v-model="formData.deptId"
@select="selectDepart">
// 获取当前选中部门的名称
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() {
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)
}
}
测试代码
:data="data2"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
获取
清空
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'
}
};
}
};
如果是三级或者是多级,响应的数据格式必须要有'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实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
vue项目获取下拉框选中id_vue treeselect获取当前选中项的label实例相关推荐
- vue项目获取下拉框选中id_vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: {{it ...
- JavaScript案例 全选 获取下拉框选中的值
<script type="text/javascript">function choice(obj){var checkbox = document.getEleme ...
- php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本
本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...
- java 获取下拉框的值_Java获取下拉菜单选中的选项
提到这样一个需求"在新闻表中添加新闻分类的编号和名字",一般情况下我们将分类的ID放在下拉菜单选项的value中,此时需要获取选项的编号和名字,我们该怎么做呢?我常用的有如下两种方 ...
- php 获取下拉框选中的文本,jQuery如何获取select选择的文本与值?(代码示例)...
本篇文章给大家带来的内容是关于jQuery如何获取select选择的文本与值,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 获取select : 获取select 选中的 text ...
- easyui获取下拉框选中的文本值_Word中文本显示不全的常见3种情况及解决方法
在日常工作使用Word文档时,经常会遇到文本显示不全的情况,比如文本框或表格里的文本显示不全等情况,你一般是怎么操作呢?以下这3种常见情况你可能也遇到过,一起看看是什么原因并解决它们吧! 1.文本显示 ...
- jq获取下拉框选中的值和文本
获取文本 $("select[name='province'] option:selected").text() 获取选中值 $("select[name='provin ...
- 下拉框选中状态html,js中select下拉框选中
怎么用js动态 设置select中的某个值为选中值 select 中的某个options为新建,但在子页面新建一个选项时怎么能提交新用JS动态设置select的方法如下: 手动通过原生JS来实现: / ...
- thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中 <select οnchange="getChilds(this.value)&quo ...
最新文章
- 怎么读懂python语句_Python入门基础知识点总结,一点文章就能让你看懂Python
- Java 18 要来了,你不会还在用Java 8吧?
- PingCode Wiki ——国内最顶级的产研团队知识库产品介绍
- .NET CF WM上创建快捷方式
- 线性求逆元模板_ACM 数论基本模板
- 任务和特权级保护(五)——《x86汇编语言:从实模式到保护模式》读书笔记36
- boost::graph模块实现二分图算法的测试程序
- 2015.12.23 OC中的字符串(NSStringNSMutableString) 数组(NSArrayNSMutableArray)
- 罗斯蒙特电磁流量计8723说明书_罗斯蒙特8732E电磁流量计故障原因及解决办法!...
- SpringBoot文件上传大小设置(yml中配置)
- c语言如何将字母向下移一格,c语言 如何将一个字符串的前n个字母后移至尾,其他的按顺序前移?...
- Jenkins pipeline+Maven+Gitlab
- Spring Data JPA 概述 与 快速入门(操作 mysql 数据)
- 小黑笔记:transe模型
- 使用闲置迅捷无线路由器桥接指南(扩大WIFI覆盖面)
- java 工作流框架_java工作流是什么?哪些工作流框架比较好?
- ideapad linux s9_联想IdeaPad S9 电源管理驱动
- 2022年中科院信工所考研杂记
- 能力清单:透视成功逻辑,学会清单练习
- 怎么把SEO和SEM配合起来