如何给<FormItem里面的input标签增加后缀
时间: 2024-03-02 20:53:58 浏览: 34
在 Ant Design Vue 中,`<FormItem>` 组件内部使用的是 `<Input>` 组件,因此可以使用 `<Input>` 组件的 `suffix` 属性来为 `<FormItem>` 中的 `<Input>` 标签增加后缀。
例如,下面的代码演示了如何在 `<FormItem>` 中的 `<Input>` 标签后增加一个后缀文字 "元":
```html
<template>
<a-form :form="form">
<a-form-item label="金额">
<a-input :suffix="'元'" />
</a-form-item>
</a-form>
</template>
```
在上面的代码中,我们在 `<Input>` 标签中使用了 `suffix` 属性,并将其值设置为字符串 "元",即可为 `<FormItem>` 中的 `<Input>` 标签增加后缀文字。
需要注意的是,在 `<FormItem>` 中使用 `<Input>` 组件时,需要将 `<FormItem>` 的 `prop` 属性设置为表单数据对象中对应的属性名,例如:
```html
<template>
<a-form :form="form">
<a-form-item label="金额" prop="amount">
<a-input :suffix="'元'" v-model="form.amount" />
</a-form-item>
</a-form>
</template>
```
在上面的代码中,我们将 `<FormItem>` 的 `prop` 属性设置为 "amount",并使用 `v-model` 指令将表单数据对象中的 "amount" 属性绑定到 `<Input>` 标签上,这样用户输入的数据就可以自动更新到表单数据对象中对应的属性上。
相关推荐
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)