ant兼容label-in-value和field-names正常显示回显的vue方案
时间: 2023-08-10 18:08:04 浏览: 52
为了兼容 `label-in-value` 和 `field-names`,可以使用 `Ant Design Vue` 中的 `ASelect` 组件和 `AForm` 组件。
首先,在 `AForm` 中使用 `:model` 属性绑定数据对象,然后在 `ASelect` 中使用 `v-model` 属性绑定选中的值。同时,为了支持 `label-in-value`,需要设置 `:value-key` 属性为选项对象中的键名。
示例代码如下:
```vue
<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` 属性,将选项对象中的键名映射到数据对象中的键名。
示例代码如下:
```vue
<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` 相同。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)