ant兼容label-in-value和field-names正常显示回显的vue方案

为了兼容 `label-in-value` 和 `field-names`，可以使用 `Ant Design Vue` 中的 `ASelect` 组件和 `AForm` 组件。

首先，在 `AForm` 中使用 `:model` 属性绑定数据对象，然后在 `ASelect` 中使用 `v-model` 属性绑定选中的值。同时，为了支持 `label-in-value`，需要设置 `:value-key` 属性为选项对象中的键名。

示例代码如下：

<template>
  <a-form :model="formData">
    <a-form-item label="选项">
      <a-select v-model="formData.selectValue" :options="options" :value-key="'value'" />
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        selectValue: '',
      },
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
      ],
    };
  },
};
</script>

如果要支持 `field-names`，则需要在 `AForm` 中设置 `:name` 属性，并且在 `ASelect` 中设置 `name` 属性和 `:field-name` 属性，将选项对象中的键名映射到数据对象中的键名。

示例代码如下：

<template>
  <a-form :model="formData" :name="formName">
    <a-form-item label="选项" :name="fieldName">
      <a-select v-model="formData.selectValue" :options="options" :value-key="'value'" name="selectValue" :field-name="fieldName" />
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        selectValue: '',
      },
      formName: 'myForm',
      fieldName: 'selectValue',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
      ],
    };
  },
};
</script>

注意，为了支持 `field-names`，需要在选项对象中设置与数据对象中键名相同的键名。以上示例中，选项对象中的键名为 `value`，与数据对象中的键名 `selectValue` 相同。