amis Mapping 组件怎么按映射值渲染文本、HTML 或其他组件【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisamis 是前端低代码框架页面通过 JSON 配置生成。当页面上某个字段的值只有有限几种取值比如订单状态、开关标志需要用不同的文本、带样式的 HTML 标签甚至完全不同的组件来展示时就可以用mappingMapping 映射组件给它一个value和一份map映射表它负责把值转换成对应的展示内容未命中时走*兜底。完整属性说明见 Mapping 映射。本文按展示复杂度的顺序走一遍配置路径纯文本 → HTML → 其他 amis 组件 → 自定义模板 → 数组映射 → 作为表单/表格字段使用 → 远程字典。准备条件先能渲染出一个 amis 配置。amis 有两种用法JS SDK外链 js 即可适合非 React 项目和 Reactnpm i amisReact16.8.6、mobx^4.5.0见 快速开始。配置本身是 JSON顶层节点必须是type: page页面内容放在body里树形结构规则见 配置与组件。本文所有示例都是一个page包一个mapping节点的完整 schema替换渲染处的 amisJSON 即可生效。用 map 按映射值渲染文本最基本形态value是待匹配的值map是 k-v 对象key 为匹配值value 为展示文本*是兜底项命中不到其他 key 时展示它。{ type: page, body: { type: mapping, value: 1, map: { 1: 第一, 2: 第二, 3: 第三, *: 其他 } } }value为1时页面展示「第一」。把value改成5这类未配置的值就展示*对应的「其他」。如果值可能不存在例如接口还没返回或字段为空用placeholder控制数据不存在时的展现{ type: page, body: { type: mapping, placeholder: 数据不存在, map: { 1: 第一, 2: 第二, 3: 第三, *: 其他 } } }渲染 HTMLmap的 value 可以是 HTML 字符串渲染后直接作为标签展示。HTML 里还能用${xxx}模板语法取数据域里的变量比如兜底项中回显原始值{ type: page, body: { type: mapping, value: 2, map: { 1: span classlabel label-info漂亮/span, 2: span classlabel label-success开心/span, 3: span classlabel label-danger惊吓/span, 4: span classlabel label-warning紧张/span, *: span classlabel label-default其他${type}/span } } }上例value为2页面展示label-success样式的「开心」标签。这套label label-*类名来自 amis 自带的 helper.scss 样式体系。渲染其他 amis 组件map的 value 也可以是 amis schema 节点这样不同映射值可以渲染完全不同的组件例如一个tag、一个tpl再加一个普通字符串兜底{ type: page, body: { type: mapping, value: 1, map: { 1: { type: tag, label: #4096ff, displayMode: rounded, color: #4096ff }, 2: { type: tpl, tpl: 2 }, *: 其他 } } }有一个必须记住的限制配置了itemSchema后映射值不会再作为 schema 渲染此时渲染交给itemSchema模板接管下一节。用 itemSchema 渲染自定义模板itemSchema需要 2.5.2 及以上版本。它支持 HTML 字符串或 SchemaNode 两种形式用来统一控制映射命中后的渲染方式映射值是非 object时模板里用${item}获取映射值映射值是object时用模板语法${xxx}获取该 object 的属性值模板中还可以用${xxx}获取数据域中的其他变量。HTML 或字符串模板{ type: page, body: { type: mapping, value: 1, map: { 1: 第一, 2: 第二, 3: 第三, *: 其他 }, itemSchema: 自定义模板span stylecolor: red${item}/span } }这里映射值是字符串${item}取到的就是map中命中的文本。SchemaNode 模板{ type: page, body: { type: mapping, value: 1, map: { 1: 第一, 2: 第二, 3: 第三, *: 其他 }, itemSchema: { type: tag, label: ${item} } } }在模板中引用 object 属性与数据域变量当映射值是 object 时模板可直接取 object 属性也可以取数据域变量。下面page的data里提供了myNamemap的 value 是 objectitemSchema同时用到了两者{ type: page, data: { myName: cat }, body: { type: mapping, value: 1, map: { 1: { label: 开心, color: red }, 2: { label: 伤心, color: blue }, 3: { label: 冷漠, color: gray }, *: 其他 }, itemSchema: { type: tag, label: ${myName} ${label}, color: ${color} } } }value命中1后${label}、${color}取自 object 的label、color属性${myName}取自数据域。value 为数组时映射展示多个1.5.0 及以上版本value是数组时会逐项映射、展示多个结果{ type: page, body: { type: mapping, value: [1, 2, 3, 4, 5], map: { 1: span classlabel label-info漂亮/span, 2: span classlabel label-success开心/span, 3: span classlabel label-danger惊吓/span, 4: span classlabel label-warning紧张/span, *: span classlabel label-default其他/span } } }5没有对应 key落到*展示「其他」。用对象数组作为 map 映射源2.5.2 起map除了 k-v 对象还支持对象数组。简单对象数组{ type: mapping, value: 1, map: [{1: 第一}, {2: 第二}, {3: 第三}, {*: 其他}] }多 key 对象数组当每个映射项有多个 key 时需要用valueField指定哪个字段作为匹配value的 key不配置时默认用value可以用labelField指定展示字段默认label{ type: mapping, value: happy, valueField: name, map: [ { name: happy, label: 开心 }, { name: sad, label: 悲伤 }, { name: *, label: 其他 } ] }注意配置labelField后映射值无法再作为 schema 组件渲染和itemSchema的限制一样。完整示例显式指定labelField{ type: page, body: { type: mapping, value: happy, valueField: name, labelField: label, map: [ { name: happy, label: 开心, color: red }, { name: sad, label: 悲伤, color: blue }, { name: *, label: 其他, color: gray } ] } }用作 FieldTable 列、List、Card 和表单静态展示当 mapping 用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时可以设置name属性映射同名变量不再需要手动写value。Table 列示例每行的type字段值自动参与映射{ type: table, data: { items: [ { id: 1, type: 1 }, { id: 2, type: 2 }, { id: 3, type: 3 } ] }, columns: [ { name: id, label: Id }, { name: type, label: 映射, type: mapping, map: { 1: span classlabel label-info漂亮/span, 2: span classlabel label-success开心/span, 3: span classlabel label-danger惊吓/span, 4: span classlabel label-warning紧张/span, *: 其他${type} } } ] }List 的内容、Card 卡片的内容配置同上。表单中静态展示用static-mapping{ type: form, data: { type: 2 }, body: [ { type: static-mapping, name: type, label: 映射, map: { 1: span classlabel label-info漂亮/span, 2: span classlabel label-success开心/span, 3: span classlabel label-danger惊吓/span, 4: span classlabel label-warning紧张/span, *: 其他${type} } } ] }布尔值字段也支持映射key 可以用1/0也可以用true/false{ type: form, data: { type: true }, body: [ { type: static-mapping, name: type, label: 映射, map: { true: span classlabel label-info开/span, false: span classlabel label-default关/span } } ] }远程拉取字典与关联上下文变量1.1.6 起可以配置source不写死map而由接口或变量提供字典数据格式参考map配置。远程接口{ type: form, data: { type: 2 }, body: [ { type: mapping, name: type, label: 映射, source: /api/mapping } ] }默认source有 30s 缓存适合通常不常变更的字典数据。想改缓存时间参考 API 类型 文档中的cache配置单位毫秒。关联上下文变量source也可以取数据域变量而不是发请求。示例中initApi的响应处理把接口返回的整个data字段存入zidian变量$$$$是整体赋值的写法mapping 通过$${zidian}引用它注意当数据域里的变量值为$$时表示将所有接口返回的data字段值整体赋值到对应的 key 中{ type: form, initApi: { url: /api/mapping, method: get, responseData: { zidian: $$$$, type: 2 } }, body: [ { type: mapping, name: type, label: 映射, source: $${zidian} } ] }验证渲染是否符合预期调整value或 Field 模式下行数据的同名字段为map中已配置的 key确认页面展示对应的文本/HTML/组件把value改成map中不存在的值确认落到*兜底项数据不存在的场景确认展示placeholder配置的文本用了itemSchema后确认展示的是模板渲染结果${item}或 object 属性替换后而不是映射值本身。属性与版本限制Mapping 映射 的属性表属性名类型默认值说明classNamestring外层 CSS 类名placeholderstring占位文本mapobject或Arrayobject映射配置sourcestringorAPIAPI 或数据映射valueFieldstringvalue2.5.2map或source为Arrayobject时用来匹配映射的字段名labelFieldstringlabel2.5.2map或source为Arrayobject时用来展示的字段名配置后映射值无法作为 schema 组件渲染itemSchemastring或 SchemaNode2.5.2自定义渲染模板支持html或schemaNode映射值非 object 时用${item}获取映射值object 时可用${xxx}取属性值也可用${xxx}取数据域变量版本要求汇总value为数组映射展示多个1.5.0 及以上source远程字典 / 上下文变量1.1.6 及以上itemSchema、对象数组map、valueField/labelField2.5.2 及以上。两个最容易踩的限制一是配置了itemSchema后映射值不再作为 schema 渲染二是配置了labelField对象数组场景后同样失去 schema 渲染能力。需要「命中后渲染整块组件」且同时想加包装样式时把包装组件直接写进map的 value第三节的写法而不是叠加itemSchema。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考