欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在Vue 中獲取下拉框的文本及選項值操作

 更新時間：2020年08月13日 11:43:37   作者：andy5520  
這篇文章主要介紹了在Vue 中獲取下拉框的文本及選項值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

方法1：

<!-- element表單組件 -->
<el-form
:model="ruleForm"
label-position="right"
ref="ruleForm"  // 被ref 標記的
status-icon
size="small"
inline
:rules="rules"
label-width="150px"
class="demo-ruleForm"
>
<el-form-item class="addProductA b" label="產品名稱" prop="productKind">
<!-- <el-input v-model.number="ruleForm.productKind" maxlength="11" :disabled="isScan" placeholder="請輸入產品名稱"></el-input> -->
<el-cascader
:options="productsDataOptions"
v-model="ruleForm.productKind"
:disabled="isScan"
style="width:300px;"
size="small"
clearable
placeholder="試試搜索：指南"
filterable
ref="cascaderAddr" // 被ref 標記的
@change="handlerSelectProductsWithUnit"
:show-all-levels="false"
></el-cascader>

以上的Form 表單 及其嵌套的聯(lián)級下拉框都被ref標記 之后形成了refs的組件集合

添加監(jiān)視可以獲取當前的refs集合中包含表單ruleForm及cascaderAddr 兩個組件集合

下拉框所選擇值value =v-model="ruleForm.productKind" 可以獲取 或者使用

var text=this.$refs['cascaderAddr'].currentLabels
var value =this.$refs['cascaderAddr'].currentValue

方法2：

給下拉框或者聯(lián)級菜單下拉框定義id

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

補充知識：VUE element-ui下拉列表獲取label值

有這樣一個場景，當我們往后臺數(shù)據傳的是id時，我們卻想在前臺獲取列表顯示的值，這時候可以用下面的方法來獲取你想要的label值

let obj = {};
    obj = this.arr.find((item) => {
     return item.id === value;
    });

然后就可以從obj獲取你想要的值了

以上這篇在Vue 中獲取下拉框的文本及選項值操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論