vue3 element-plus 下拉框改变获取key,value,lobal

在Vue3框架中，特别是使用Element Plus库构建应用时，如果你想要监听下拉框（select）的选择变化并获取选中的选项的键值对（key-value），你可以通过`v-model`指令结合`@change`事件来实现。首先，确保你在组件中已经设置了`v-model`绑定到一个数组，例如：

<el-select v-model="selectedValue" placeholder="请选择">
  <el-option
    v-for="(item, index) in options"
    :key="index"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

然后，在你的组件数据中定义`selectedValue`和`options`：

export default {
  data() {
    return {
      selectedValue: '', // 存储当前选中的值，初始为空
      options: [
        { label: '选项A', value: 'a' },
        { label: '选项B', value: 'b' },
        { label: '选项C', value: 'c' } // 更多选项...
      ]
    };
  },
  methods: {
    handleChange(value) {
      // 当下拉框选择改变时，这个函数会被调用
      console.log('Key:', value.key, ', Value:', value.value);
    }
  }
};

在这个例子中，每当用户从下拉列表中选择一个选项，`handleChange`方法会被触发，并打印出所选选项的`key`和`value`。