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