Vue中获取Element-UI下拉框的label和value值
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
