Vue中獲取Element-UI下拉框的label和value值
訂閱專欄
1 .效果如下：
點擊對應的選項獲取一個定義的id值和標簽值，可以講這2個值傳給后端，而不用根據id查詢名稱。
2 .代碼和說明如下
下面展示一些 內聯代碼片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-col>
<el-select v-model="getValue" filterable placeholder="請選擇" @change="getSelect">
<el-option
v-for="item in options"
:key="item.id"
:label="item.label"
:value="[item.id,item.label]"> 這里注意
</el-option>
</el-select>
{{getValue}}
</el-col>
</el-row>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
getValue: '',
options: [{//選項數據：模擬從后端拿到的數據
id: '1',
label: '黃金糕'
}, {
id: '2',
label: '雙皮奶'
}, {
id: '3',
label: '蚵仔煎'
}, {
id: '4',
label: '龍須面'
}, {
id: '5',
label: '北京烤鴨'
}],
},
methods:{
getSelect:function(e){//e代表被選中的值，即下拉框的value。由於寫的是[item.id,item.label]，現在是包含2個值的數組
console.log(Array.isArray(e))
let [id,label]=e //數組解構：數組解構時數組的元素是按次序排列的，變量的取值由它的位置決定
console.log(id)//id值
console.log(label)//label值
}
}
})
</script>
</html>
————————————————
版權聲明：本文為CSDN博主「KeleQAQ」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/KeleQAQ/article/details/118230010