基于react+antd可编辑，可增删改表格方案

1. 可编辑表格：如何实现？

 方案1：在table的columns的render里渲染Form.Item，同时需要自己考虑dataSource的增删逻辑。

代码：

• columns的render里渲染Form.Item

{
        title: "点击动作",
        dataIndex: "action",
        width: "200px",
        render(text, field, index) {
          return (
            <Form.Item
              name={[field.name, "action"]}
              wrapperCol={{ span: 24 }}
              initialValue={"link"}
              shouldUpdate
              >
              <Select
                style={{
                  marginRight: "8px",
                }}
                placeholder="请选择"
                onChange={(e)=>changeAction(e,index)}
                >
                <Option value={"subFlow"}>跳转路由</Option>
                <Option value={"link"}>跳转外部链接</Option>
                <Option value={"text"}>发送文字消息</Option>
                <Option value={"miniprogram"}>跳转小程序</Option>
              </Select>
            </Form.Item>
          )
        },
      }

方案2：Form.List的增(add)、删(remove)功能结合table的样式

代码：

• Form.List 包裹table,传递add,remove，整个table数据就是一个Form.List

      <Form.Item label="按钮">
        <Form.List name="buttons">
          {(fields, { add, remove }, index) => {
            return (
                <Table
                  bordered
                  scroll={{ x: 900 }}
                  pagination={false}
                  className="infoTable"
                  size={"small"}
                  rowKey="index"
                  dataSource={fields}
                  columns={this.getMapColumns(remove)}
                  footer={
                    fields.length >= 10 ? null : () => this.setFooter(add)
                  }></Table>
            )
          }}
        </Form.List>

• table的colums属性渲染Form.Item ，remove直接传到操作列

      {
        title: "操作",
        fixed: "right",
        align: "center",
        ellipsis: true,
        width: 100,
        render: (text, field) => (
          <div className="action-icons">
            <Tooltip title="删除" trigger="hover" placement="top">
              <Popconfirm
                placement="topRight"
                title="确定要删除该记录吗？"
                onConfirm={() => remove(field.name)}>
                <i
                  className="action-icon margin_icon iconfont icon-trash"
                  title="删除"
                />
              </Popconfirm>
            </Tooltip>
          </div>
        ),
      }

• remove()传入index（上面的代码field.name 就是index），add()第一个参数可自定义初始化的值

  setFooter = (add) => {
    return (
      <Form.Item>
        <Button
          type="link"
          onClick={() => add({
            label:'',
            action:'link',
            actionContent:undefined,
            actionParams:[],
            actionPath:''

          })}
          block
          icon={<PlusCircleOutlined />}>
          添加按钮
        </Button>
      </Form.Item>
    )
  }