方法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 表單 及其巢狀的聯級下拉框都被ref標記 之後形成了refs的元件集合

新增監視可以獲取當前的refs集合中包含表單ruleForm及cascaderAddr 兩個元件集合

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

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

方法2：

給下拉框或者聯級選單下拉框定義id

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

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

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

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

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

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