InputTable 表格

基本用法

可以用来展示数组类型的数据。配置columns 数组，来定义列信息。

```schema: scope=”body” { “type”: “form”, “debug”: “true”, “data”: { “table”: [ { “a”: “a1”, “b”: “b1” }, { “a”: “a2”, “b”: “b2” }, { “a”: “a3”, “b”: “b3” } ] }, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”:”input-table”, “name”:”table”, “columns”:[ { “name”: “a”, “label”: “A” }, { “name”: “b”, “label”: “B” } ] } ] }

我们为表单数据域设置了`table`变量，配置`table`表单项可以展示该数据
## 显示序号
```schema: scope="body"
{
  "type": "form",
  "data": {
    "table": [
        {
            "a": "a1",
            "b": "b1"
        },
        {
            "a": "a2",
            "b": "b2"
        },
        {
            "a": "a3",
            "b": "b3"
        }
    ]
  },
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "showIndex": true,
      "type":"input-table",
      "name":"table",
      "columns":[
          {
            "name": "a",
            "label": "A"
          },
          {
            "name": "b",
            "label": "B"
          }
      ]
    }
  ]
}

可新增行

可以配置addable和editable指定可以新增且编辑行数据

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”:”input-table”, “name”:”table”, “addable”: true, “editable”: true, “columns”:[ { “name”: “a”, “label”: “A” }, { “name”: “b”, “label”: “B” } ] } ] }

## 可复制新增行
> 1.4.0 及以上版本
还能通过 `copyable` 来增加一个复制按钮来复制当前行
```schema: scope="body"
{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
    "type":"input-table",
    "name":"table",
    "addable": true,
    "copyable": true,
    "editable": true,
    "value": [
      {
        "a": "a1",
        "b": "b1"
      }
    ],
    "columns":[
        {
          "name": "a",
          "label": "A"
        },
        {
          "name": "b",
          "label": "B"
        }
    ]
  }
  ]
}

配置按钮为文字

可以通过对应的 BtnLabel 及 BtnIcon 来改成显示文字而不是图标

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”:”input-table”, “name”:”table”, “addable”: true, “addBtnLabel”: “添加”, “addBtnIcon”: false, “copyable”: true, “copyBtnLabel”: “复制”, “copyBtnIcon”: false, “editable”: true, “editBtnLabel”: “编辑”, “editBtnIcon”: false, “value”: [ { “a”: “a1”, “b”: “b1” } ], “columns”:[ { “name”: “a”, “label”: “A” }, { “name”: “b”, “label”: “B” } ] } ] }

## 按钮触发新增行
按钮上配置`"actionType": "add"`和`target`指定表格`name`，可以实现点击按钮添加一行的效果。
```schema: scope="body"
{
  "type": "form",
  "data": {
    "table": [
      {
        "a": "a1",
        "b": "b1"
      },
      {
        "a": "a2",
        "b": "b2"
      },
      {
        "a": "a3",
        "b": "b3"
      }
    ]
  },
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "input-table",
      "name": "table",
      "label": "Table",
      "columns": [
        {
          "label": "A",
          "name": "a"
        },
        {
          "label": "B",
          "name": "b"
        }
      ]
    },
    {
      "type": "button",
      "label": "Table新增一行",
      "target": "table",
      "actionType": "add"
    }
  ]
}

当表格上配置了addApi时，会请求该 api，并将返回数据添加到目标表格。

另外还可以配置payload，直接将数据添加到目标表格。

```schema: scope=”body” { “type”: “form”, “data”: { “table”: [ { “a”: “a1”, “b”: “b1” }, { “a”: “a2”, “b”: “b2” }, { “a”: “a3”, “b”: “b3” } ] }, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-table”, “name”: “table”, “label”: “Table”, “columns”: [ { “label”: “A”, “name”: “a” }, { “label”: “B”, “name”: “b” } ] }, { “type”: “button”, “label”: “Table新增一行”, “target”: “table”, “actionType”: “add”, “payload”: { “a”: “a4”, “b”: “b4” } } ] }

## 可编辑内容
> 这是 1.2.3 新增的合并写法，1.2.2 之前请用后面提到的 quickEdit
每一列的都可以通过 type 来将其改造成可编辑的列，比如下面的例子（建议配合 `"needConfirm": false` 来改成非确认模式）
```schema: scope="body"
{
  "type": "form",
  "data": {
    "table": [
      {
        "a": "a1",
        "b": "b1"
      },
      {
        "a": "a2",
        "b": "b2"
      },
      {
        "a": "a3",
        "b": "b3"
      }
    ]
  },
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "input-table",
      "name": "table",
      "label": "Table",
      "addable": true,
      "needConfirm": false,
      "columns": [
        {
          "label": "A",
          "name": "a",
          "type": "input-text"
        },
        {
          "label": "B",
          "name": "b",
          "type": "select",
          "options": [
            "b1", "b2", "b3"
          ]
        }
      ]
    }
  ]
}

除了上面的例子，还可以在列上配置quickEdit实现编辑配置，实现展现和编辑分离，更多配置参考 快速编辑

```schema: scope=”body” { “type”: “form”, “data”: { “table”: [ { “a”: “a1”, “b”: “b1” }, { “a”: “a2”, “b”: “b2” }, { “a”: “a3”, “b”: “b3” } ] }, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-table”, “name”: “table”, “label”: “Table”, “columns”: [ { “label”: “A”, “name”: “a”, “quickEdit”: { “type”: “select”, “options”: [“a1”, “a2”, “a3”] } }, { “label”: “B”, “name”: “b”, “quickEdit”: true } ] } ] }

## 显示分页
```schema: scope="body"
{
  "type": "form",
  "data": {
    "table": [
        {
            "a": "a1",
            "b": "b1"
        },
        {
            "a": "a2",
            "b": "b2"
        },
        {
            "a": "a3",
            "b": "b3"
        },
        {
            "a": "a4",
            "b": "b4"
        },
        {
            "a": "a5",
            "b": "b5"
        },
        {
            "a": "a6",
            "b": "b6"
        }
    ]
  },
  "body": [
    {
      "showIndex": true,
      "type":"input-table",
      "perPage": 5,
      "name":"table",
      "columns":[
          {
            "name": "a",
            "label": "A"
          },
          {
            "name": "b",
            "label": "B"
          }
      ]
    }
  ]
}

可拖拽

配置"draggable": true，实现可拖拽调整顺序

```schema: scope=”body” { “type”: “form”, “data”: { “table”: [ { “a”: “a1”, “b”: “b1” }, { “a”: “a2”, “b”: “b2” }, { “a”: “a3”, “b”: “b3” } ] }, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-table”, “name”: “table”, “label”: “Table”, “draggable”: true, “columns”: [ { “label”: “A”, “name”: “a” }, { “label”: “B”, “name”: “b” } ] } ] }

## 非确认模式
配置`"needConfirm": false`，不需要确认，那么就是一直就是处于编辑形态。
```schema: scope="body"
{
  "type": "form",
  "data": {
    "table": [
      {
        "a": "a1",
        "b": "b1"
      },
      {
        "a": "a2",
        "b": "b2"
      },
      {
        "a": "a3",
        "b": "b3"
      }
    ]
  },
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "input-table",
      "name": "table",
      "label": "Table",
      "needConfirm": false,
      "addable": true,
      "removable": true,
      "columns": [
        {
          "label": "A",
          "name": "a",
          "quickEdit": false
        },
        {
          "label": "B",
          "name": "b"
        }
      ]
    }
  ]
}

获取父级数据

默认情况下，Table 内表达项无法获取父级数据域的数据，如下，我们添加 Table 表单项时，尽管 Table 内的文本框的name与父级数据域中的super_text变量同名，但是没有自动映射值。

```schema: scope=”body” { “type”: “form”, “debug”: true, “mode”: “horizontal”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-text”, “label”: “父级文本框”, “name”: “super_text”, “value”: “123” }, { “type”: “input-table”, “name”: “list”, “label”: “不可获取父级数据”, “addable”: true, “needConfirm”: false, “columns”: [ { “name”: “super_text”, “type”: “text”, “label”: “A” } ] } ] }

可以配置`"canAccessSuperData": true` 同时配置 `"strictMode": false` 开启此特性，如下，配置了该配置项后，添加 Table 的`text`表单项会初始会自动映射父级数据域的同名变量。需要注意的是，这里只会初始会映射，一旦修改过就是当前行数据为主了。也就是说，表单项类型的，只会起到初始值的作用。如果为非表单项则会同步更新，比如这个例子的第二列。同时非表单项字段可以用在表单项字段中做联动。
```schema: scope="body"
{
  "type": "form",
  "debug": true,
  "mode": "horizontal",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
        "type": "input-text",
        "label": "父级文本框",
        "name": "super_text",
        "value": "123"
    },
    {
        "type": "switch",
        "label": "父级勾选框",
        "name": "super_switch",
        "value": false
    },
    {
        "type": "input-table",
        "name": "list",
        "label": "可获取父级数据",
        "addable": true,
        "needConfirm": false,
        "canAccessSuperData": true,
        "strictMode": false,
        "value": [{}],
        "columns": [
            {
                "name": "super_text",
                "type": "text",
                "label": "表单项",
                "quickEdit": {
                  "disabledOn": "this.super_switch"
                }
            },
            {
                "name": "super_switch",
                "type": "status",
                "quickEdit": false,
                "label": "非表单项"
            }
        ]
    }
  ]
}

高亮行

1.8.0 及以上版本

通过 rowClassNameExpr 来添加类，比如下面的例子中，如果输入的内容是 a 则背景色为绿色`

schema: scope="body" { "type": "form", "api": "/api/mock2/form/saveForm", "body": [ { "type": "input-table", "name": "table", "addable": true, "editable": true, "rowClassNameExpr": "<%= data.a === 'a' ? 'bg-success' : '' %>", "columns": [ { "name": "a", "label": "A" } ] } ] }

属性表