vben admin 框架表单字段下拉框获取接口返回，并且更改componentProps的label和value

vben admin框架是一款基于Vue.js的后台管理前端框架，它提供了一套预设的组件库用于快速搭建行政管理系统。当你需要从服务器接口获取数据来填充表单的下拉列表（通常称为选择器或dropdown）时，你可以按照以下步骤操作：

1. **定义数据获取方法**:
首先，在你的组件里创建一个函数，使用axios或其他HTTP客户端库发送GET请求到指定的接口。例如：

async getData() {
  const response = await axios.get('/api/dropdown-data');
  return response.data;
}

2. **设置默认的`componentProps`**:
在你的组件的data或computed属性中，初始化`options`数组，初始值可以是空或者默认选项：

data() {
  return {
    options: [],
    // ...其他数据
  };
},
computed: {
  fetchedOptions() {
    return this.getData().then((data) => {
      if (data && data.length > 0) {
        return data.map(item => ({ value: item.id, label: item.name }));
      } else {
        return [];
      }
    });
  }
}

3. **动态绑定`options`到下拉框组件**:
使用`v-for`遍历`fetchedOptions`，将`label`和`value`作为属性传递给`<select>`或`<el-select>`等下拉框组件：

<template>
  <el-form-item label="下拉框">
    <el-select v-model="selectedValue" placeholder="请选择...">
      <el-option v-for="option in fetchedOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
    };
  },
  computed: {
    ... // 这里已经包含了fetchedOptions计算属性
  },
};
</script>

当接口返回的数据改变时，`fetchedOptions`会自动更新，从而更新下拉框的选择项。