Antd Table 实现可编辑表格 ，含高级自定义用法

后台管理系统非常很多用到可编辑表格，做完这个版本的项目，有许多收获，其中一项就是可编辑表格，表格行内编辑、新增、删除。高能预警，哈哈^.

一、引入

import {Button, Form, Input,Popconfirm, Select, Table} from "antd";

二、页面加入控件

//引入form的名字
   <Form form={form} component={false}>
      <Table
        size='small'
        components={components}
        bordered
        dataSource={dataSource}
        columns={columns1}
        rowKey={'sevenRuleListTable'}
        pagination={{
          onShowSizeChange:onShowSizeChange,
          onChange: cancel,
          position: ['none', 'bottomCenter'],
        }}
      /></Form>
  </div>

三、代码实现

//定义form的名字
 const [form] = Form.useForm();
 const [editingKey, setEditingKey] = useState(null);
  const isEditing = record => record.id === editingKey;
  const handleDelete = key => {
    const dataSource = [...state.dataSource];
    setState({
      ...state,
      dataSource: dataSource.filter(item => item.id !== key),
    });
    setEditingKey(null);
  };
  const EditableCell = ({
                          editing,
                          dataIndex,
                          title,
                          inputType,
                          record,
                          index,
                          must,
                          children,
                          ...restProps
                        }) => {

//这里可以定义编辑状态，特定列的返回标签和值
    const inputNode = dataIndex === 'boxList' ? <Select
       mode='multiple' onChange={(value) => changeBoxList(value)}  allowClear>
//boxListMy这里是动态获取的数据源
      {boxListMy.map((item)=>{
        return <Option value={item.id}>{item.alias}</Option>
      })}
    </Select> : <Input/>;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
            name={dataIndex}
            style={{
              margin: 0,
            }}
            rules={[
              {
                required: must,
                message: ` ${title}不能为空!`,
              },
            ]}
          >
            {inputNode}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
  const {dataSource} = state;
  const components = {
    body: {
      cell: EditableCell,
    },
  };
 const columns = [
    {
      title: 'HA名称',
      dataIndex: 'haName',
      editable: true,
    },
    {
      title: '云盒',
      dataIndex: 'boxList',
      editable: true,
      inputType: 'boxList',
      width: 270,
      render: (text, record) => {
        const editable1 = isEditing(record);
        return editable1 ? (<div></div>) : (<div style={{display: "flex", flexDirection: "column",}}>{
          record.boxList.map((item, index) => {
            return <span>{item}</span>;
          })
        }
        </div>);
      }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 270,
      render: (text, record) => {
        return <div>
          <Button type='text' size='small' style={{marginRight: 5, color: '#a292fb'}}
                  onClick={() => toChangeHAGroup(record)}>变更</Button>
          <Button type='text' size='small' style={{marginRight: 5, color: '#5e9fff'}}
                  onClick={() => toManage(record)}>HA实例管理</Button>
          <Popconfirm title="确定删除" onConfirm={() => deleteGroup(record)}>
            <Button type='text' szie='small' style={{marginRight: '5px', marginBottom: 5, color: '#eb2c68'}}>删除</Button>
          </Popconfirm>
        </div>
      }
    },
  ];
  const columns1 = columns.map(col => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: record => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        inputType:col.inputType,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });