优维低代码:构件渲染子构件
source link: https://studygolang.com/articles/35723
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
优维低代码:构件渲染子构件
EASYOPS_youwei · 大约2小时之前 · 79 次点击 · 预计阅读时间 4 分钟 · 大约8小时之前 开始浏览导语
优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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"]
}
}
}
以上就是今天关于优维低代码的分享,希望对你有所收获!
有疑问加站长微信联系(非本文作者)
Recommend
-
3
优维低代码:解析构件开发 Step by Step EASYOPS_youwei · 大约3小...
-
1
优维低代码:构件基本说明 EASYOPS_youwei · 4天之前 · 439 次点击...
-
3
优维低代码:构件参数传递 EASYOPS_youwei · 大约20小时之前 · 19...
-
2
优维低代码:构件事件传递 EASYOPS_youwei · 大约2小时之前 · 55...
-
0
优维低代码:构件事件传递 原创 优维科技EasyOps 2022-06-13 17:41:44
-
1
优维低代码:构件 slot 说明 EASYOPS_youwei · 大约17小时之前 · 1...
-
2
优维低代码:Brick Life Cycle 构件生命周期 EASYOPS_youwei · 大...
-
2
优维低代码:Provider 构件 EASYOPS_youwei · 大约14小时之前 · 15...
-
1
优维低代码:Legacy Templates 构件模板 EASYOPS_youwei · 大约4小...
-
1
优维低代码:构件编辑器开发 EASYOPS_youwei · 3天之前 · 560 次点...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK