首先，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;
}
}