---
title: ProField 字段组件
---

# ProField 字段组件

ProField 是基础的字段组件，支持多种字段类型，可以在编辑模式和只读模式之间切换。它是 ProForm 的基础组件。

## 说明

ProField 是一个通用的字段组件，可以根据 `valueType` 自动渲染对应的输入组件。支持文本、选择器、日期、时间等多种类型。

## API

### Props

| 参数          | 说明                       | 类型                                             | 默认值   |
| ------------- | -------------------------- | ------------------------------------------------ | -------- |
| text          | 需要格式化的值             | `String \| Number \| Array \| Object`            | -        |
| valueType     | 格式化的类型               | `String`                                         | `'text'` |
| mode          | 模式类型（edit/read）      | `String`                                         | `'edit'` |
| plain         | 简约模式                   | `Boolean`                                        | `false`  |
| light         | 轻量模式                   | `Boolean`                                        | `false`  |
| valueEnum     | 映射值的类型               | `Object \| Map`                                  | -        |
| label         | Label                      | `String \| Number \| Boolean \| Object \| Array` | -        |
| fieldProps    | 字段属性（传递给底层组件） | `Object`                                         | `{}`     |
| formItemProps | 表单项属性                 | `Object`                                         | `{}`     |
| emptyText     | 空值显示文本               | `String \| Number \| Boolean \| Object \| Array` | `'-'`    |

### valueType 支持的类型

-   `text` - 文本输入框
-   `textarea` - 文本域
-   `password` - 密码输入框
-   `textRange` - 文本范围（两个输入框）
-   `select` - 选择器（支持单选、多选、可搜索）
-   `area` - 省市区选择器
-   `date` - 日期选择器
-   `dateTime` - 日期时间选择器
-   `dateRange` - 日期范围选择器
-   `time` - 时间选择器
-   `timeRange` - 时间范围选择器

### Events

| 事件名      | 说明         | 参数           |
| ----------- | ------------ | -------------- |
| update:text | 值更新时触发 | `(value: any)` |

## 示例

:::example

pro-field/basic

:::