Antd Table 可编辑表格

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

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

上代码：有部分注释

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 fieldreturn <Form.ItemshouldUpdate={true}>{({ getFieldValue }) => {// 获取当前行数据，然后渲染你要的数据const record = (getFieldValue('tableForm') || [])?.[index] || {}return <atarget='_blank'href={`/view-personne/list/detail?staffId=${record?.id || ''}`} rel='noreferrer'>{record?.name}</a>}}</Form.Item>}},{title: '姓名',dataIndex: 'name',render(text, field) {// 这里的写法是 Form.List 的方法 https://ant.design/components/form-cn/#components-form-demo-dynamic-form-itemsreturn <Form.Itemrules={ [{ required: true, message: '请输入姓名' }] }name={ [field.name, 'name'] }fieldKey={ [field.fieldKey, 'name'] }><Input placeholder='请输入姓名' allowClear /></Form.Item>}},{title: '手机号',dataIndex: 'tel',render(text, field) {return <Form.Itemrules={ [{ required: true, message: '请输入手机号' }] }name={ [field.name, 'tel'] }fieldKey={ [field.fieldKey, 'tel'] }><Input placeholder='请输入姓名' allowClear /></Form.Item>}},{title: '学历',dataIndex: 'education',render(text, field) {return <Form.Itemrules={ [{ required: true, message: '请选择学历' }] }name={ [field.name, 'education'] }fieldKey={ [field.fieldKey, 'education'] }><Select placeholder='请输入姓名' allowClear><Select.Option value='1'>专科</Select.Option><Select.Option value='2'>本科</Select.Option><Select.Option value='3'>研究生</Select.Option></Select></Form.Item>}},{title: '操作',dataIndex: 'operate',className: 'operate',width: 120,render(text, field) {return (<><PlusOutlined onClick={() => add()} /><MinusCircleOutlined style={{ marginLeft: 10 }} onClick={() => remove(field.name)} /></>)}}]}return (<><Form className='table-edit-form' form={form} onFinish={onFinish} initialValues={{tableForm: [{}, {}]}} ><Form.List name='tableForm'>{ (fields, { add, remove }) => {// 将Table视为 Form.List 中循环的 Form.Itemreturn (<TabledataSource={ fields }columns={ getColumns(add, remove) }rowKey='key'pagination={false}/>)}}</Form.List><Form.Item><Button htmlType='submit' type='primary'>Submit</Button></Form.Item></Form></>)
}export default TableEditForm

index.css:

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

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

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

Antd Table 可编辑表格相关推荐

jeecgboot前端自定义组件、JgEditable Table行编辑表格
上一篇本次示例全部是在新建的Demo.vue中操作 jeecgboot前端自定义组件 1.首先,在webstrom中找到ant-design-vue-jeecg/src/views/jeecg/mo ...
antd react table 嵌套子表格例子
antd react table 嵌套子表格例子 import { Button, TableColumnsType } from 'antd'; import { Badge, Dropdown, ...
antd table 时间搜索_antd table按表格里的日期去排序操作
表格内容根据票据日期升序(这里是已经排序后的效果) 上代码代码中data的内容如下根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeStr ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）
前端导出 excel 的需求很多,但市面上好用的库并不多,讲明白复杂使用场景的文章更少. 本文将以文字 + demo 源码的形式,力求讲清楚满足 99% 使用场景的终极 excel 导出方案. 如果项 ...
antd Table 实现表格行固定
需求: antd Table 只有列固定和表头固定,但是我的需求是行固定前三行固定. 实现步骤方式一.表格固定行(rowClassName 实现) 思路是 :用position: sti ...
antd table 排序如何使用_antd table按表格里的日期去排序操作
表格内容根据票据日期升序(这里是已经排序后的效果) 上代码代码中data的内容如下根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeStr ...
SWT/JFACE表格Table可编辑
SWT/JFACE表格Table可编辑 2009-10-12 22:52 今天刚好遇到了这个问题写了个例子,. public class Test { public static String []N ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

Antd Table 可编辑表格

Antd Table 可编辑表格相关推荐

最新文章

热门文章