方法1：

<!-- element表單組件 --><el-form:model='ruleForm'label-position='right'ref='ruleForm' // 被ref 標(biāo)記的status-iconsize='small'inline:rules='rules'label-width='150px'class='demo-ruleForm'>

<el-form-item label='產(chǎn)品名稱' prop='productKind'><!-- <el-input v-model.number='ruleForm.productKind' maxlength='11' :disabled='isScan' placeholder='請(qǐng)輸入產(chǎn)品名稱'></el-input> --><el-cascader:options='productsDataOptions'v-model='ruleForm.productKind':disabled='isScan'style='width:300px;'size='small'clearableplaceholder='試試搜索：指南'filterableref='cascaderAddr' // 被ref 標(biāo)記的

@change='handlerSelectProductsWithUnit':show-all-levels='false'></el-cascader>

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

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

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

var text=this.$refs[’cascaderAddr’].currentLabelsvar value =this.$refs[’cascaderAddr’].currentValue

方法2：

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

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

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

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

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

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

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