vue3 elementPlus 绑定label和value两个字段的select

在 Vue3 中使用 ElementPlus 组件库，可以通过 `el-select` 组件实现绑定 `label` 和 `value` 两个字段的下拉选项框（select）。下面是一个示例：

<template>
  <el-select v-model="selected" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selected = ref('');
    const options = ref([
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ]);

    return {
      selected,
      options
    };
  }
};
</script>

在这个示例中，我们使用了 `el-select` 组件，通过 `v-model` 指令绑定了选中的值。在 `el-option` 组件中，通过 `:label` 属性绑定了显示的文本（即 `name` 字段），通过 `:value` 属性绑定了选中的值（即 `id` 字段）。这样就实现了 `label` 和 `value` 两个字段的绑定。