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

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

一、引入

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

二、页面加入控件

//引入form的名字
   

三、代码实现

//定义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' ?  : ;
    return (
      
); }; 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 ? (
) : (
{ record.boxList.map((item, index) => { return {item}; }) }
); } }, { title: '操作', dataIndex: 'operation', width: 270, render: (text, record) => { return
deleteGroup(record)}>
} }, ]; 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), }), }; });

你可能感兴趣的:(Antd Table 实现可编辑表格 ,含高级自定义用法)

{editing ? ( {inputNode} ) : ( children )}