【UI】elementui select点击获取label 和 value

简介: 【UI】elementui select点击获取label 和 value
<template>
  <el-select v-model="value" placeholder="请选择" @change="selectChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="{ value: item.value, label: item.label}">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
       options: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
          value: ''
      }
    },
    methods: {
      // 点击事件
      selectChange(val){
    console.log('select点击了',val)
      }
    }
  }
</script>

和原来select不同的地方

1.增加change事件selectChange

2.原来的:value="item.value"改为:value="{ value: item.value, label: item.label}"

注意:下拉框change事件selectChange不要加()

目录
相关文章
【UI】 element -ui select下拉框label显示多个值
【UI】 element -ui select下拉框label显示多个值
616 1
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
1396 0
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
823 1
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
2400 3
【UI】 elementui input输入框自动获取失去焦点
【UI】 elementui input输入框自动获取失去焦点
1026 1
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
933 1
【UI】elementui el-pagination分页位置靠右
【UI】elementui el-pagination分页位置靠右
820 0
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
940 0
【UI】 elementui card 禁用效果
【UI】 elementui card 禁用效果
305 0

热门文章

最新文章