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

导语

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维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"]
    }
  }
}

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

有疑问加站长微信联系（非本文作者）