UMI Demo总结

最新推荐文章于 2023-12-11 14:04:05 发布

chenwenqqqq

最新推荐文章于 2023-12-11 14:04:05 发布

阅读量178

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/chenwenqqqq/article/details/125654493

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>
  )