amis2/docs/zh-CN/components/form/input-table.md
liaoxuezhi 8ae7d0bdb4
chore: InputTable 优化升级 (#2394)
* 优化 Table 的渲染用 observe 替代 reaction 方式

* inputTable 支持分页

* 优化 inputTable 相关

* 优化 InputTable 逻辑

* 优化 InputTable 逻辑

* 优化 InputTable 逻辑

* 小调整
2021-08-17 17:04:50 +08:00

13 KiB
Executable File
Raw Blame History

title description type group menuName icon order
InputTable 表格 0 null InputTable 表格 54

基本用法

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

{
  "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表单项可以展示该数据

显示序号

{
  "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"
          }
      ]
    }
  ]
}

可新增行

可以配置addableeditable指定可以新增且编辑行数据

{
  "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"
        }
    ]
  }
  ]
}

按钮触发新增行

按钮上配置"actionType": "add"target指定表格name,可以实现点击按钮添加一行的效果。

{
  "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,并将返回数据添加到目标表格。

编辑行配置

还可以在列上配置quickEdit实现编辑配置,更多配置参考 快速编辑

{
  "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": true
        },
        {
          "label": "B",
          "name": "b",
          "quickEdit": true
        }
      ]
    }
  ]
}

显示分页

{
  "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,实现可拖拽调整顺序

{
  "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,不需要确认,那么就是一直就是处于编辑形态。

{
  "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变量同名,但是没有自动映射值。

{
  "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表单项会初始会自动映射父级数据域的同名变量。需要注意的是,这里只会初始会映射,一旦修改过就是当前行数据为主了。也就是说,表单项类型的,只会起到初始值的作用。如果为非表单项则会同步更新,比如这个例子的第二列。同时非表单项字段可以用在表单项字段中做联动。

{
  "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": "非表单项"
            }
        ]
    }
  ]
}

属性表

属性名 类型 默认值 说明
type string "table" 指定为 Table 渲染器
addable boolean false 是否可增加一行
editable boolean false 是否可编辑
removable boolean false 是否可删除
showAddBtn boolean true 是否显示添加按钮
addApi API - 新增时提交的 API
updateApi API - 修改时提交的 API
deleteApi API - 删除时提交的 API
addBtnLabel string 增加按钮名称
addBtnIcon string "fa fa-plus" 增加按钮图标
updateBtnLabel string "" 更新按钮名称
updateBtnIcon string "fa fa-pencil" 更新按钮图标
deleteBtnLabel string "" 删除按钮名称
deleteBtnIcon string "fa fa-minus" 删除按钮图标
confirmBtnLabel string "" 确认编辑按钮名称
confirmBtnIcon string "fa fa-check" 确认编辑按钮图标
cancelBtnLabel string "" 取消编辑按钮名称
cancelBtnIcon string "fa fa-times" 取消编辑按钮图标
needConfirm boolean true 是否需要确认操作,,可用来控控制表格的操作交互
canAccessSuperData boolean false 是否可以访问父级数据,也就是表单中的同级数据,通常需要跟 strictMode 搭配使用
strictMode boolean true 为了性能,默认其他表单项项值变化不会让当前表格更新,有时候为了同步获取其他表单项字段,需要开启这个。
columns array [] 列信息
columns[x].quickEdit boolean 或者 object - 配合 editable 为 true 一起使用
columns[x].quickEditOnUpdate boolean 或者 object - 可以用来区分新建模式和更新模式的编辑配置