vue基于elementUI下拉Select同时获取value/id和label/name的值

在Vue中使用Element UI的<el-select>组件时，可以通过v-model绑定一个变量来同时获取选中项的value和label。以下是一个简单的例子：

<template>
  <el-select v-model="selected" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.name"
      :value="item">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selected: null,
      options: [
        { value: '1', name: '选项1' },
        { value: '2', name: '选项2' },
        { value: '3', name: '选项3' }
      ]
    };
  },
  watch: {
    selected(newValue) {
      console.log('Value:', newValue.value); // 获取value
      console.log('Label:', newValue.name);  // 获取name
    }
  }
};
</script>

在这个例子中，selected是绑定到<el-select>的变量，它会保存选中的整个对象。每个<el-option>都是一个带有value和name属性的对象。当选项变化时，watch会监听selected的变化，并输出当前选中项的value和name。