docs/docs/cn/plugin-development/client/flow-engine/field.md
在 NocoBase 中，字段组件（Field） 用于表格和表单中展示和编辑数据。通过继承 FieldModel 相关基类，你可以自定义字段的渲染方式——比如用特殊格式展示某种数据，或者用自定义组件来编辑。
以下示例创建了一个简单的展示字段——在字段值两侧加上方括号 []：
// models/SimpleFieldModel.tsx
import React from 'react';
import { ClickableFieldModel } from '@nocobase/client-v2';
import { DisplayItemModel } from '@nocobase/flow-engine';
export class DisplaySimpleFieldModel extends ClickableFieldModel {
public renderComponent(value) {
// this.context.record 可以拿到当前行的完整记录
console.log('当前记录：', this.context.record);
console.log('当前记录 index：', this.context.recordIndex);
return <span>[{value}]</span>;
}
}
// 绑定到 'input' 类型的字段接口
DisplayItemModel.bindModelToInterface('DisplaySimpleFieldModel', ['input']);
几个关键点：
renderComponent(value) — 接收当前字段的值作为参数，返回渲染的 JSXthis.context.record — 获取当前行的完整数据记录this.context.recordIndex — 获取当前行的索引ClickableFieldModel — 继承自 FieldModel，带有点击交互能力DisplayItemModel.bindModelToInterface() — 把字段模型绑定到指定的字段接口类型（比如 input 表示文本输入类字段），这样在对应类型的字段上就能选择这个展示组件在 Plugin 的 load() 中用 registerModelLoaders 按需加载注册：
// plugin.tsx
import { Plugin } from '@nocobase/client-v2';
export class PluginFieldSimpleClient extends Plugin {
async load() {
this.flowEngine.registerModelLoaders({
DisplaySimpleFieldModel: {
loader: () => import('./models/SimpleFieldModel'),
},
});
}
}
注册完成后，在表格区块里找到一个对应类型的字段列（比如上面示例绑定了 input，对应单行文本字段），点击列的配置按钮，在「字段组件」下拉菜单中就能切换到这个自定义展示组件。完整的实战示例见 做一个自定义字段组件。