vue element ui el-select @change事件 同时获取label

tianya • 2023-04-11 • VUE
当el-select组件中的el-option标签中绑定的value值不是我们想要的，或想要更多内容的时候，我们可以使用@change方法，获取到当前选中的对象
```tsx
<el-form-item label="选择院系:" prop="college" :rules="{required: true, message: '请选择院系', trigger: 'blur'}">
   <el-select v-model="dynamicValidateForm.college" placeholder="请选择学历" @change="changeValue($event)">
      <el-option v-for="(option,index) in endOptions" :key="option.index" :label="option.fname" :value="option.fcode">
      </el-option>
   </el-select>
</el-form-item>
//change方法
changeValue(value){
   var obj = {};
   //使用find()方法在下拉数据中根据value绑定的数据查找对象。
   obj = this.endOptions.find(function(item){
      return item.fcode === value;
      })
   console.log(obj);
   },
```
方法2：
直接修改el-option的:value即可
```tsx
<template>
  <el-select @change="handleChange" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="{value:item.value,label:item.label}">
      // 或者下面这样
      :value="item">
    </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: '上海小笼包'
        }],
      }
    },
    method: {
       handleChange(params){
            const { value, label } = params;
          console.log(value, label)
       }
    }
  }
</script>
```

版权声明：
作者：tianya
链接：https://tya.zone/p/60.html
来源：天涯博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
vue element ui el-select @change事件 同时获取label
当el-select组件中的el-option标签中绑定的value值不是我们想要的，或想要更多内容的时候，我们可以使用@change方法，获取到当前选中的对象 ```tsx <el-fo……
<<上一篇
下一篇>>