在Vue 中获取下拉框的文本及选项值操作

2023-07-18 20:19:04 232

@change="handlerSelectProductsWithUnit"
:show-all-levels="false"
>

以上的Form表单及其嵌套的联级下拉框都被ref标记之后形成了refs的组件集合

添加监视可以获取当前的refs集合中包含表单ruleForm及cascaderAddr两个组件集合

下拉框所选择值value=v-model="ruleForm.productKind"可以获取或者使用

vartext=this.$refs['cascaderAddr'].currentLabels
varvalue=this.$refs['cascaderAddr'].currentValue

方法2：

给下拉框或者联级菜单下拉框定义id

this.printInfos.transportDate=document.getElementById('transportDate').value;//下拉框取值方式 this.printInfos.productKindName=document.getElementById("productKind").innerText;//文本框取值方式

补充知识：VUEelement-ui下拉列表获取label值

有这样一个场景，当我们往后台数据传的是id时，我们却想在前台获取列表显示的值，这时候可以用下面的方法来获取你想要的label值

letobj={};
obj=this.arr.find((item)=>{
returnitem.id===value;
});

然后就可以从obj获取你想要的值了

以上这篇在Vue中获取下拉框的文本及选项值操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

在Vue 中获取下拉框的文本及选项值操作

热门推荐

随机推荐