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

目录
相关文章
|
2天前
【UI】 element -ui select下拉框label显示多个值
【UI】 element -ui select下拉框label显示多个值
31 1
|
6月前
HTML+VUE+element-ui通过点击不同按钮展现不同页面
HTML+VUE+element-ui通过点击不同按钮展现不同页面
91 1
|
2天前
|
前端开发
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
|
2天前
【UI】 elementui card 禁用效果
【UI】 elementui card 禁用效果
17 0
|
2天前
【UI】 elementui input输入框自动获取失去焦点
【UI】 elementui input输入框自动获取失去焦点
62 1
|
2天前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
34 1
|
7月前
SAP UI5 Smart Value Help 总结
SAP UI5 Smart Value Help 总结
38 0
|
8月前
|
存储
如何在 WebClient UI 里创建 Value Help
如何在 WebClient UI 里创建 Value Help
75 1
element-ui时间选择器限制只能点击不让输入(整理)
element-ui时间选择器限制只能点击不让输入(整理)
|
10月前
|
JavaScript 前端开发 数据处理
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)

热门文章

最新文章