amis/docs/components/form/table.md

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

基本用法

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

{
  "type": "form",
  "debug": "true",
  "data": {
    "table": [
        {
            "a": "a1",
            "b": "b1"
        },
        {
            "a": "a2",
            "b": "b2"
        },
        {
            "a": "a3",
            "b": "b3"
        }
    ]
  },
  "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
  "controls": [
    {
    "type":"table",
    "name":"table",
    "columns":[
        {
          "name": "a",
          "label": "A"
        },
        {
          "name": "b",
          "label": "B"
        }
    ]
  }
  ]
}

我们为表单数据域设置了table变量，配置table表单项可以展示该数据

可新增行

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

{
  "type": "form",
  "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
  "controls": [
    {
    "type":"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": "https://houtai.baidu.com/api/mock2/form/saveForm",
  "controls": [
    {
      "type": "table",
      "name": "table",
      "label": "Table",
      "columns": [
        {
          "label": "A",
          "name": "a"
        },
        {
          "label": "B",
          "name": "b"
        }
      ]
    },
    {
        "type": "button",
        "label": "Table新增一行",
        "target": "table",
        "actionType": "add"
    }
  ]
}

编辑行配置

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

{
  "type": "form",
  "data": {
    "table": [
      {
        "a": "a1",
        "b": "b1"
      },
      {
        "a": "a2",
        "b": "b2"
      },
      {
        "a": "a3",
        "b": "b3"
      }
    ]
  },
  "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
  "controls": [
    {
      "type": "table",
      "name": "table",
      "label": "Table",
      "columns": [
        {
          "label": "A",
          "name": "a",
          "quickEdit": true
        },
        {
          "label": "B",
          "name": "b",
          "quickEdit": true
        }
      ]
    }
  ]
}

可拖拽

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

{
  "type": "form",
  "data": {
    "table": [
      {
        "a": "a1",
        "b": "b1"
      },
      {
        "a": "a2",
        "b": "b2"
      },
      {
        "a": "a3",
        "b": "b3"
      }
    ]
  },
  "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
  "controls": [
    {
      "type": "table",
      "name": "table",
      "label": "Table",
      "draggable": true,
      "columns": [
        {
          "label": "A",
          "name": "a"
        },
        {
          "label": "B",
          "name": "b"
        }
      ]
    }
  ]
}

属性表

属性名	类型	默认值	说明
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"	取消编辑按钮图标
columns	array	[]	列信息
columns[x].quickEdit	boolean 或者 object	-	配合 editable 为 true 一起使用
columns[x].quickEditOnUpdate	boolean 或者 object	-	可以用来区分新建模式和更新模式的编辑配置