React+Antd封装的简易的编辑表格
<h4 id="前言">前言</h4><blockquote>
<p>因为项目需要，需要一个可编辑的表格，但是Antd中提供的可编辑表格实在是太繁琐，使用起来实在是太不友好了，所以自己就写了一个简易的编辑表格组件。</p>
</blockquote>
<h4 id="第一步">第一步</h4>
<p>首先，在项目中创建一个<code>EditTable.tsx</code>的文件;在文件中引入需要的模块；</p>
<blockquote>
<p>PS:本人使用的React Hook + TypeScript来进行开发的；</p>
</blockquote>
<pre><code class="language-jsx">import React, { useState, useEffect } from 'react';
import { Table, Form, message, Input } from 'antd'; //需要的antd的组件
import { FormComponentProps } from 'antd/lib/form';
import { ColumnProps } from 'antd/lib/table';
import { dataItemType } from './interface';//定义
/**
* 定义需要的数据的类型
*/
interface EditTableProps extends FormComponentProps {
dataSource: dataItemType[];
loading: boolean;
}
</code></pre>
<h4 id="第二步">第二步</h4>
<p>编写组件</p>
<pre><code class="language-jsx">const EditTable: React.FC<EditTableProps> = ({loading, dataSource, form: {getFieldDecorator}}) => {
const = useState<dataItemType[]>();//用来存储编辑后的数据, 用来传递给后台
const = useState<dataItemType>();//用来展示编辑后的数据
useEffect = () => {
//将传入的数据浅拷贝一下，避免在子组件中直接修改父组件传入的 dataSource
setData([...dataSource]);
setEditData([...dataSource]);
,[]};
/**
* 列表表头数组
*/
const columns: Array<ColumnProps<dataItemType>> = [
{
title: '单据',
dataIndex: 'record'
},
/*........*/
{
title: '编辑',
dataIndex: 'edit',
render: (text: any, record: any, index: number) => {
return (
<Form>
{getFieldDecorator(`countNum[${index}]`, {
rules: [
{
required: true,
message: '编辑字段不能为空',
},
],
})(
<Input
onChange={e => {
textChange(e, record);
}}
/>
)}
</Form>
);
},
]
return (
<Table columns={columns} dataSource={data} pagination={false} loading={loading} rowKey='id'/>
)
}
export default Form.create<EditTableProps>()(EditTable)
</code></pre>
<h4 id="第三步">第三步</h4>
<p>处理编辑的数据</p>
<pre><code class="language-jsx">const textChange = (e: any, record: any) => {
let rows = [...data];
let row = rows.find(item => item.id === record.id);
if (row) {
row.countNum = e.target.value;
}
//保存编辑后的数据
setEditCacheData(rows);
};
</code></pre>
<p>到此，一个简单的编辑表格组件就已经封装好了，可能还有更好的实现方法，但是当时由于项目事件紧张，只能想出这种实现方法，各位大佬不喜勿喷；</p><br><br>
来源：https://www.cnblogs.com/cuiwenqian/p/12221869.html 感谢楼主的分享！正好项目里需要用到可编辑表格，Antd自带的确实比较复杂，这个简化的版本看起来很实用。
顶一个！楼主辛苦了，写的很清晰明了。
提几个小建议哈：
1. 关于数据更新：楼主的代码里用到了setData和setEditData两个状态，不过在textChange函数里好像只调用了setEditCacheData？这里可能需要再确认一下是不是有typo或者遗漏~
2. 性能优化：如果数据量比较大的话，每次输入都触发state更新可能会导致卡顿，可以考虑用debounce优化一下。
3. 类型定义：dataItemType这个接口在代码里提到了，但是没有给出具体定义，新手copy的话可能会有点困惑。
4. 另外，如果想要保存数据到后台的话，楼上是怎么处理的？是手动提交还是自动保存呀？
// 一个小小的建议，可以给Input加个defaultValue
<Input
defaultValue={record.countNum}
onChange={e => textChange(e, record)}
/>
总体来说非常实用，感谢楼主的贡献！希望能看到更多类似的干货分享~
支持下
頁:
[1]