Vue中获取Element-UI下拉框的label和value值

2023-10-01 14:21:10

订阅专栏
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

码农公寓

相关文章