UI 字段

UI（用户界面）字段为你提供了强大的能力，可以直接在Admin Panel中添加你自己的React组件，并嵌套在其他字段中。它对你的文档数据完全没有影响，仅用于展示。你可以把它看作是一种"插入"自定义React组件的方式，这样你就可以在任意位置为编辑人员提供新的控件。

通过UI字段，你可以：

  • 在编辑视图中添加自定义消息或文本块，用于描述周边字段的用途
  • 在订单编辑视图的侧边栏添加"退款"按钮，该按钮可能会向自定义的refund端点发起fetch请求
  • 在页面列表视图中添加"查看页面"按钮，为编辑人员提供快速访问网站前端的捷径
  • 构建"清除缓存"按钮或类似机制，手动清除特定文档的缓存

要添加UI字段，只需在Field Config中将type设置为ui：

import type { Field } from 'payload'

export const MyUIField: Field = {
  // ...
  type: 'ui', // highlight-line
}

配置选项

选项描述
name *该字段的唯一标识符
label该 UI 字段的可读标签
admin.components.Field *在编辑视图中渲染该字段的 React 组件。了解更多
admin.components.Cell在集合列表视图中作为单元格渲染的 React 组件。了解更多
admin.disableListColumn设置为 true 可防止该 UI 字段出现在列表视图的列选择器中。
custom用于添加自定义数据的扩展点（例如插件使用）

* 星号表示该属性为必填项。

示例

collections/ExampleCollection.ts

import type { CollectionConfig } from 'payload'

export const ExampleCollection: CollectionConfig = {
  slug: 'example-collection',
  fields: [
    {
      name: 'myCustomUIField', // 必填
      type: 'ui', // 必填
      admin: {
        components: {
          Field: '/path/to/MyCustomUIField',
          Cell: '/path/to/MyCustomUICell',
        },
      },
    },
  ],
}