Antd Table 可编辑表格

antd Table 官方文档提及了 可编辑单元格、可编辑行,这里解决 可编辑表格 

主要思路是将 antd Table 可编辑行  antd Form.List 相结合,将Table视为 Form.List 中循环的 Form.Item

Antd Table 可编辑表格_第1张图片 可编辑表格

上代码:有部分注释

import React from 'react'
import { Form, Input, Button, Table, Select } from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import './index.css'

const TableEditForm = () => {
  const [form] = Form.useForm()

  const onFinish = values => {
    console.log(values)
  }

  const getColumns = (add, remove) => {
    return [
      {
        title: 'key',
        dataIndex: 'key'
      },
      {
        title: 'a链接',
        dataIndex: 'alink',
        render(text, field, index) {
          // 注意:这里的 field 不是当前行数据,而是 Form.List field
          return 
            {({ getFieldValue }) => {
              // 获取当前行数据,然后渲染你要的数据
              const record = (getFieldValue('tableForm') || [])?.[index] || {}
              return 
                {record?.name}
              
            }}
          
        }
      },
      {
        title: '姓名',
        dataIndex: 'name',
        render(text, field) {
          // 这里的写法是 Form.List 的方法 https://ant.design/components/form-cn/#components-form-demo-dynamic-form-items
          return 
            
          
        }
      },
      {
        title: '手机号',
        dataIndex: 'tel',
        render(text, field) {
          return 
            
          
        }
      },
      {
        title: '学历',
        dataIndex: 'education',
        render(text, field) {
          return 
            
          
        }
      },
      {
        title: '操作',
        dataIndex: 'operate',
        className: 'operate',
        width: 120,
        render(text, field) {
          return (
            <>
               add()} />
               remove(field.name)} />
            
          )
        }
      }
    ]
  }

  return (
    <>
      
{ (fields, { add, remove }) => { // 将Table视为 Form.List 中循环的 Form.Item return ( ) }} ) } export default TableEditForm

index.css: 

.table-edit-form .ant-table-content  .ant-table-cell .ant-form-item {
    margin-bottom: 0;
}

另外,不推荐这种全表格形式的编辑,比较难理解和维护。更推荐antd可编辑行或者可编辑单元格的方式。 

如果有用,点个赞吧 (*^▽^*)

你可能感兴趣的:(React,Antd,表格内编辑,可编辑表格,Table,Form.List,可编辑行,可编辑单元格)