优维低代码：构件渲染子构件

导语

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

为了特殊标注某个字段我们常会对一些字段进行特殊的渲染，这里常见于表格或详情描述等，在编排这里，我们叫构件渲染子构件 —— useBrick

{"brick": "presentational-bricks.brick-table","properties": {"rowKey": "id","page": "${query.page=1|number}","pageSize": "${query.pageSize=10|number}","columns": [{"title": "分支","dataIndex": "branch","useBrick": {"brick": "presentational-bricks.brick-link","transform": {"label": "@{cellData}"}}},{"title": "编号","dataIndex": "id"},{"title": "流水线","dataIndex": "pipeline"},{"title": "状态","dataIndex": "status","useBrick": {"brick": "presentational-bricks.brick-value-mapping","transform": {"value": "@{cellData}"},"properties": {"mapping": {"success": {"color": "green"},"failed": {"color": "red"},"warning": {"color": "orange"}}}}}],"dataSource": {"list": [{"id": "#7220","pipeline": "contract-center / build_giraffe_sdk","branch": "develop","status": "success"},{"id": "#7221","pipeline": "container / demo","branch": "master","status": "failed"},{"id": "#7222","pipeline": "container / table","branch": "feature","status": "warning"}],"page": 1,"pageSize": 10,"total": 3}}
}

注意 columns 里面的 useBrick 定义，他一般的结构为：

"useBrick": {"brick": "presentational-bricks.brick-value-mapping","properties": {"mapping": {"success": {"color": "green"},"failed": {"color": "red"},"warning": {"color": "orange"}}}"transform": {"value": "@{cellData}"},}

• brick: 表示使用哪个构件
• properties: 定义子 brick 的属性
• transform: 将父数据映射为子构件的 properties，父容器会传递什么数据给子构件这个由父容器决定，决定见各父容器的文档。比如brick-table给子容器传递了cellData，rowData，columnIndex。

详细 transform 的介绍见Transform 数据转换

更多示例（描述列表）：

{"brick": "presentational-bricks.brick-descriptions","properties": {"itemList": [{"text": "Lynette","label": "UserName"},{"text": "18","label": "Age"},{"label": "Tags","useBrick": {"brick": "presentational-bricks.brick-tag","transformFrom": "tags","transform": "tagList","properties": {"configProps": {"color": "orange"},"showCard": false}}}],"descriptionTitle": "User Info","dataSource": {"tags": ["user"]}}
}

以上就是今天关于优维低代码的分享，希望对你有所收获！