标签：tr tbody ant EditableProTable table 组件 antd td border

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

           

标签：tr,tbody,ant,EditableProTable,table,组件,antd,td,border
来源： https://www.cnblogs.com/qungege/p/15433992.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。