字段完全指南:配置、特性与源码级原理)
NocoBase 下拉多选Multiple Select字段完全指南配置、特性与源码级原理【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase下拉多选Multiple select是 NocoBase 数据建模中最常用的选项类字段之一用于让一条记录从预设选项集合中同时保存多个值。本文以 NocoBase 数据源文档中「下拉多选」字段的官方说明为主体结合 multipleSelect.ts 与 operators.ts 等前端源码系统讲解该字段的适用场景、创建配置、编辑与删除规则、页面使用方式及其底层实现原理帮助你从「会用」进阶到「理解为什么这么设计」。介绍在 NocoBase 中下拉多选Multiple select字段用于从一组预设选项中选择多个值。它保存的是多个选项值在页面中通常以标签Tag形式展示适合表达标签、能力、偏好、适用范围等一对多且取值固定的业务属性。从字段分类看它属于「状态和选项字段」choices 分组与下拉单选Single select、单选框组、复选框组 共同构成 NocoBase 的固定选项字段家族。其核心区别在于下拉单选只能选择一个值对应字段界面类型select下拉多选可从选项中选择多个值对应字段界面类型multipleSelect复选框组同样可选择多个值但录入控件是复选框组对应界面类型checkboxGroup。如果你的业务只需要从一组固定值中选择一个请改用下拉单选或单选框组只有当需要保存多个固定值时才适合使用下拉多选。适用场景下拉多选字段的典型业务场景包括客户标签如「重点客户」「高潜客户」「已签约」一条客户记录可同时拥有多个标签用户偏好如内容订阅频道、消息通知方式、兴趣分类产品适用场景如一个 SaaS 产品同时适用于「零售」「制造」「教育」多个行业设备能力如一台设备同时支持「Wi-Fi」「蓝牙」「NFC」项目风险点如一个项目同时存在「进度风险」「成本风险」问题分类如一个工单可被同时标记为多个问题类别。这些场景的共同特征是取值为有限的固定集合、且一条记录需要同时命中多个取值。这正是 NocoBase 中选项类字段包括下拉多选被设计用来解决的问题。字段特性下拉多选字段的默认行为由源码中 MultipleSelectFieldInterface 的定义决定可以从源码确认以下特性特性说明默认 Field interfacemultipleSelect默认 Field typearray可选 Field typearray、json源码中availableTypes [array, json]以实际字段映射为准页面组件编辑模式使用多选下拉选择器x-component: Selectmode: multiple默认值支持源码默认defaultValue: []空数组筛选支持按包含某个选项筛选操作符见下文「筛选操作符」排序通常不用于排序校验支持必填和选项范围约束在源码层面multipleSelect.ts 中字段的默认 schema 定义为default { type: array, defaultValue: [], uiSchema: { type: array, x-component: Select, x-component-props: { mode: multiple, }, enum: [], }, };从中可以看出三个关键设计数据层是数组字段在数据层保存为数组类型type: array与单选字段type: string见 select.ts有本质区别录入控件复用 Select虽然界面叫「下拉多选」底层复用的是 NocoBase 的 Select 组件只是通过mode: multiple开启了多选模式选项来源是 enum可选选项通过uiSchema.enum即配置表单中的「选项」数据源维护。此外schemaInitialize 方法在字段初始化时会做两件事将组件宽度强制设为 100%width: 100%当字段被用在表格Table或看板Kanban区块中时自动开启ellipsis: true即超出显示宽度时以省略号截断避免多标签撑破单元格布局。从源码结构还可以推断该字段被注册在choices分组、order 3与下拉单选order 2、复选框组order 5一起出现在字段添加面板的「选项」分类下。创建配置在数据表的「Configure fields」页面中点击「Add field」选择「下拉多选」即可创建下拉多选字段。创建时需要填写以下配置项配置说明Field interface字段的界面类型。下拉多选对应multipleSelect决定页面中如何录入和展示。Field display name字段在界面中显示的名称比如「客户标签」「适用场景」「问题分类」。建议使用业务人员能直接理解的名称。Field name字段标识名称用于 API、关系字段、权限、工作流等内部引用。创建后通常不再修改只支持字母、数字和下划线并且必须以字母开头。Field type字段在数据层的类型。下拉多选通常保存为数组或 JSON具体以字段配置和数据源能力为准。Default value默认值。新增记录时如果用户没有填写可以自动带出默认值。Validation rules校验规则。通常配置必填和选项范围。Description字段说明。适合写字段含义、填写要求、数据来源或维护人。关于其中的「选项」配置需要特别说明虽然上表没有单列但下拉多选的核心之一就是预设选项列表。在源码中字段的属性配置通过properties { ...defaultProps, uiSchema.enum: dataSource }注册见 multipleSelect.ts其中dataSource即选项数据源允许你为每个选项设置标签和值在 UI 上可通过 Select 组件的多选标签模式录入多个选项值。:::warning 注意字段名创建后会被页面区块、权限、工作流和 API 引用。创建前先确认命名避免后续修改带来配置调整成本。:::编辑配置创建后点击字段右侧的「Edit」可以编辑下拉多选字段配置。编辑字段主要用于调整字段在 NocoBase 中的展示和使用方式比如修改显示名称、说明、默认值、校验规则或字段专属配置如选项列表。如果字段来自主数据库中已经同步的表编辑时通常是在做字段映射——把数据库字段映射为 NocoBase 的 Field type 和 Field interface。配置允许编辑说明Field display name是修改字段在界面中的显示名称不改变字段标识名称。Field name否字段标识名称创建后通常不能在编辑表单中修改。Field interface条件支持主数据库字段或同步字段在字段映射时可以调整。调整后会影响页面输入、展示和校验方式。Field type条件支持主数据库字段或同步字段在字段映射时可以调整。调整前需要确认已有数据能否按新类型使用。Default value是调整新增记录时的默认值。Validation rules是调整字段校验规则。Description是补充字段含义、填写要求、数据来源或维护人。:::warning 注意切换 Field type 或 Field interface 不等于简单改一个显示名称。它会影响字段的存储方式、输入组件、校验规则、筛选条件和工作流变量使用方式。已有数据较多时先确认数据格式是否匹配。:::例如将 Field type 从array调整为json虽然都属于可选范围availableTypes [array, json]但存储与序列化方式可能不同需确认存量数据能否按新类型被正确读取。删除字段点击字段右侧的「Delete」可以删除下拉多选字段。主数据库中还可以勾选多个字段后批量删除。删除影响范围取决于字段来源删除主数据库中新建的下拉多选字段时通常会同时删除数据库中的真实列及该列已有数据删除从数据库同步或外部数据源映射出的字段时影响范围取决于对应数据源和字段来源。:::danger 警告删除字段可能影响页面区块、表单、筛选、权限、工作流、API、导入导出和已有数据。删除前先确认字段是否仍被业务配置引用。:::由于下拉多选字段常被用于筛选区块、工作流条件和权限规则中删除前建议先检索这些配置中是否仍引用了该字段标识名称。页面配置使用下拉多选字段适合表达多个标签或多个固定选项。在不同区块中它承担着不同的职责场景用途表单区块从选项中选择多个值。录入控件为多选下拉选择器。表格区块以多个标签展示选项。配合ellipsis属性在单元格中截断显示。筛选区块按包含某些标签筛选。工作流和权限作为包含、不包含等条件参与判断。在表格、看板区块中如前面源码分析所述字段会自动应用ellipsis: true保证多标签在窄单元格中的展示体验。筛选操作符源码级解析下拉多选字段的筛选能力由filterable.operators operators.array决定。在 operators.ts 中数组类字段的筛选操作符包括操作符界面文案含义$match是匹配默认选中字段值与给定值一致$notMatch不是字段值与给定值不一致$anyOf是任意一个字段值包含给定值中的任意一个$noneOf不是任意一个字段值不包含给定值中的任意一个$empty为空字段值为空无需输入值$notEmpty不为空字段值不为空无需输入值其中需要输入值的操作符$match、$notMatch、$anyOf、$noneOf在筛选界面中渲染为Select组件的tags 模式mode: tags即筛选条件本身也支持输入多个标签值进行比较$empty与$notEmpty则无需输入值。这解释了文档中「支持按包含某个选项筛选」的具体含义通过$anyOf是任意一个操作符可以筛选出包含指定任意一个标签的记录配合$noneOf可实现「不包含某些标签」的排除式筛选。工作流与权限中的「包含 / 不包含」判断同样建立在上述数组操作符之上。与相关选项字段的对比维度下拉多选下拉单选复选框组可选值数量多个一个多个Field interfacemultipleSelectselectcheckboxGroup默认 Field typearraystringarray可选 Field typearray、jsonstring、bigInt、booleanarray、json录入组件Selectmultiple 模式Select单选Checkbox.Group分组顺序325对比信息分别来自 multipleSelect.ts、select.ts 与 checkboxGroup.ts。选择建议需要从下拉面板中选择多个值 →下拉多选只需要一个值、希望界面紧凑 →下拉单选选项较少且希望所有选项直接可见、勾选式录入 →复选框组。相关链接字段 — 了解字段的作用、分类和映射逻辑普通表 — 在普通表中创建和管理字段下拉单选 — 从选项中选择一个值复选框组 — 以复选框方式选择多个值【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考