構建帶有自訂標籤和表徵圖的動態標籤頁 - DataV

tabs表示組件的配置項類型為標籤組。切換標籤可展示當前標籤下的內容，⽀持動態增減標籤組。

配置項說明

欄位名	含義	類型	是否必選	備忘
`name`	顯示名稱	string	是	無。
`type`	類型	string	是	無。
`default`	預設值	object	否	不填時值為空白。
`addable`	是否可以動態增減	boolean	否	預設為`true`。
`template`	動態增減的模板	object	否	預設為`{}`。
`children`	各標籤組內容	array	否	預設為`[]`。⼦控制項key欄位不可使用關鍵字：`_icon`、`id`和`_label`。說明在每個⼦元素中，可以使⽤`_label`更改系列名（例如`系列⼀`改為`模板`），`_icon`更改表徵圖。
`fold`	是否預設展開	boolean	否	預設為`true`。

值說明

條件	資料類型	樣本	預設值	備忘
不涉及	array	`[ { "name": "系列一" }, { "name": "系列二" } ]`	`[]`	在每個子項目中，可以使用`_label`設定獨立的tab名，使用`_icon`增加表徵圖。

配置樣本

可增減（配置template動態增加模板內容） tabs配置樣本

 "tabs": {
    "name": "正常標籤",
    "type": "tabs",
    "maxTabs": 10,
    "default": [
      {
        "seriesName": "鋼鐵"
      }
    ],
    "template": {
      "name": "系列<%= i + 1%>",
      "children": {
        "seriesName": {
          "type": "text",
          "name": "系列名"
        }
      }
    }
}

內容固定（不配置template） tabs配置樣本

"tabs": {
    "name": "標籤",
    "type": "tabs",
    "addable": false,
    "children": [
      {
        "name": "使用者資訊",
        "children": {
          "serieName": {
            "name": "姓名",
            "type": "text"
          }
        }
      },
      {
        "name": "是否應用",
        "children": {
          "switch": {
            "name": "開關",
            "type": "switch"
          }
        }
      }
    ]
}

使用獨立的icon和label tabs配置樣本

此時需要通過值傳入icon地址。

{
  "tabs": {
    "name": "標籤",
    "type": "tabs",
    "default": [
      {
        "link": true,
        "_label": "食品行業",
        "_icon": "https://img.alicdn.com/tfs/TB1fck7voH1gK0jSZSyXXXtlpXa-201-200.png"
      }
    ],
    "template": {
      "name": "系列<%= i + 1%>",
      "children": {
        "link": {
          "type": "switch",
          "name": "Link"
        }
      }
    }
  }
}