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

Posted 2022-06-25 优维科技EasyOps

导语

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

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