如何在Cuba Platform Frontend UI实体编辑组件内显示可编辑表格

核心思路是将多条联系信息作为表单的嵌套数组字段处理，内嵌表格本质是多组联系信息输入的可视化载体，具体实现步骤如下：

• 表单字段结构定义
  提前在表单模型中声明数组类型字段contacts，每个子元素的固定结构为{ contactType: string, value: string }。新增场景下默认初始化1条空数据，编辑场景下直接映射后端返回的已有联系信息数组即可。
• 表格渲染逻辑
  表格每一行绑定contacts数组的对应索引项，列配置固定为3类：
  • 类型列：渲染contact type选择器（下拉单选组件，枚举值可根据业务预设，比如手机号、邮箱、企业微信等），双向绑定当前行的contactType字段
  • 值列：渲染输入框组件，双向绑定当前行的value字段
  • 操作列：渲染行删除按钮，仅当contacts数组长度大于1时显示，避免所有联系信息被清空
    表格底部额外放置「新增联系方式」按钮，点击时向contacts数组末尾push一条结构为{ contactType: '', value: '' }的空数据即可自动新增一行。
• 校验规则配置
  分两层做表单校验：
  1. 全局校验：要求contacts数组至少存在1条校验通过的有效数据
  2. 行级校验：每行的contactType和value均为必填项，value字段可根据当前行选的contactType做动态格式校验，比如选手机号时校验11位数字格式，选邮箱时校验邮箱格式。
• 提交逻辑处理
  表单提交时直接将整个contacts数组和Account的其他基础字段一同提交给后端即可，编辑场景下后端可通过数组内是否带主键ID判断对应联系信息是新增、编辑还是删除操作。

主流前端框架的表单库都有现成的嵌套数组字段能力：React生态的React Hook Form可直接用useFieldArrayAPI、Formik有FieldArray组件；Vue生态的Element Plus、Ant Design Vue表单组件均支持数组类型字段绑定，不用自行手写数组增删的状态管理逻辑。

内容的提问来源于stack exchange，提问作者aspiringdev