【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不要加()

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

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    5
  • 2
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
    199
  • 3
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    30
  • 4
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    8
  • 5
    如何在React.js中使用Shadcn/UI
    77
  • 6
    移动端UI名词 - AxureMost
    4
  • 7
    unity判断鼠标在不在UI上
    12
  • 8
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    25
  • 9
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    13
  • 10
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    5
  • 1
    如何在React.js中使用Shadcn/UI
    77
  • 2
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
    199
  • 3
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    21
  • 4
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    41
  • 5
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    32
  • 6
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    40
  • 7
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    101
  • 8
    unity判断鼠标在不在UI上
    62
  • 9
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    85
  • 10
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    164
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等