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

在Vue 中獲取下拉框的文本及選項(xiàng)值操作

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

方法1：

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

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

添加監(jiān)視可以獲取當(dāng)前的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; // 文本框取值方式

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

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

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

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

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

相關(guān)文章

最新評論