首先，antd EditableProTable 组件是在 table组件的基础上又封装了一层，可以实现行更新，删除，增加。只需动动手指，简单配置一下即可。
先下载 EditableProTable 组件的依赖 cnpm install --save @ant-design/pro-table;
引入 import { EditableProTable } from '@ant-design/pro-table';
使用：
第一：根据后台返回数据设置表头：
const columnsR = [{
title: '问题类型',
dataIndex: 'codeName',
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
}
}, //验证编辑更新时，输入框是否有值，相当于正则
{
title: '操作',
valueType: 'option',
width: 200,
render: (text, record, _, action) => [
<a
key="editable"
style={{color:'#78cdd1'}}
onClick={() => {
var _a;
(_a = action.startEditable) === null || _a === void 0 ? void 0 : _a.call(action, record.id);
}}
>
编辑
</a>
]
}]
<EditableProTable
rowKey="id"
columns={columnsR}
request={() => {
return {
data: taskNameList,//数据源注入
success: true,
}
}}//获取后台的数据
value={taskNameList}//必须要写上，否则更新或者删除时表格数据不会更新
editable={{
type: 'multiple',
onSave: async (rowKey, newData, oldData) => {
console.log(rowKey,newData, oldData);
//保存时触发 rowKey是每行数据的id,newData是新填写的数据,oldData是老数据，依据业务需求向后台传参。
},
onDelete: async (rowKey, data) => {
console.log(rowKey, data);
//删除时触发 rowKey是每行数据的id,data是删除的数据，依据业务需求向后台传参。
}
}}
recordCreatorProps={{
position: 'end',
record: () => ({
id: Date.now(),//最好写上，否则控制台报key警告。
}),
onClick: () => {
message.destroy()
}
}}//此项配置是新添加一行的按钮配置，详细配置可查看 EditableProTable文档
/>
//这样我们就实现了一个功能非常齐全的表格 展示如下：
感兴趣的小伙伴可以尝试一下。
样式：（仅供参考）
.ant-pro-table,.ant-table-wrapper{
width: 100%;
overflow: auto;
height: 90%;
margin: 0 auto;
.ant-table,.ant-card{
background: transparent;
}
.ant-card-body{
padding:0;
.ant-btn-dashed{
margin:0;
color: #fff;
background: transparent;
border:none;
}
}
.ant-table-thead > tr > th {
color: #00b4ff;
text-align: center;
background: #052768;
border:none;
border-right:1px solid #032786;
}
.ant-table-thead .ant-table-cell-scrollbar{
display:none;
}
.ant-table-thead > tr > th:first-child {
border-left:1px solid #032786;
}
.ant-table-tbody > tr > td{
color:#fff;
text-align: center;
border:none;
border-right:1px solid #032786;
word-break: break-all;
}
.ant-table-tbody > tr:nth-child(2n) {
background:#052870;
}
.ant-table-tbody > tr > td:first-child{
border-left:1px solid #032786;
}
.ant-table-tbody > tr:last-child > td{
border-bottom:1px solid #032786;
}
.ant-table-tbody > .ant-table-row{
cursor: pointer;
}
.ant-table-tbody{
> tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
background:#0285f2!important;
}
}
.ant-table-thead > tr > th, .ant-table-tbody > tr > td, .ant-table tfoot > tr > th, .ant-table tfoot > tr > td {
padding:12px 16px;
}
.ant-btn .anticon.anticon-plus > svg, .ant-btn .anticon.anticon-minus > svg {
shape-rendering: geometricprecision;
}
.ant-empty-description{
color:#fff;
}
.ant-space > .ant-space-item > a{
color:#78cdd1;
}
}