antd table CRUD操作实现
添加数据时，要新增一个id作为唯一的标识符，但是在Table中我需要隐藏它
{ title: 'id', dataIndex: 'id', key:'id', colSpan:0, render:()=>({props:{colSpan:0}}) },
点击编辑时得到的数据
edit {命名名称: ‘port1’, 解析值: ‘value’, 类型: ‘JSON’, id: ‘2022/4/26 11:59:08’}
修改Table中的数据后提交时，得到的是Modal中form表单的数据
modalForm {命名名称: ‘port1’, 解析值: ‘value’, 类型: ‘REGULAR’}
因为form中没有id这个字段，所以我们获取不了id的值，无法根据id进行修改，所以我们要在Modal中新增id字段，再把它隐藏
// data是Table中总的数据数组 // record是在modal修改之后的值 data.forEach((item, index) => { if (item.id === record.id) { data.splice(index, 1,record); } });
splice是真的好用，既可以删除指定元素，也可以在特定位置添加元素
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
antd table 调整数据顺序练习
- 数据和逻辑分离，最好不要出现data[0]这种情况，因为你不知道0的含义
可以采用枚举类型
const typeInformation = { 'initInstruct':0, 'symbolInstruct':1, }
- Table的column中的render可以单独写成一个函数，方便日后的维护和扩展
{ title: '操作', dataIndex: 'option', key: 'option', render: (index, record) => (this.optionBuilder(record)) }, optionBuilder = (record)=>( <Fragment> <span onClick={() => {this.up(record)}}> {this.fontBuilder('up')} </span> <span onClick={() => {this.down(record);}}> {this.fontBuilder('down')} </span> <span onClick={this.edit}> {this.fontBuilder('edit')} </span> </Fragment> )
- 阿里图标的使用
下载完图标后，把乱七八糟的后缀名的文件放到font文件夹下
修改iconfont.css中的路径
