UMI Demo总结

简介: UMI Demo总结

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 调整数据顺序练习



  1. 数据和逻辑分离,最好不要出现data[0]这种情况,因为你不知道0的含义
可以采用枚举类型


const typeInformation = {
  'initInstruct':0,
  'symbolInstruct':1,
}
  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>
  )


  1. 阿里图标的使用

下载完图标后,把乱七八糟的后缀名的文件放到font文件夹下

修改iconfont.css中的路径

9a3b6ea89a824a1e8e7abb013afc05fa.png

目录
打赏
0
0
0
0
3
分享
相关文章
umi项目中使用recoil替换dva
本文介绍使用recoil库来在umi项目中进行组件间的状态共享,部分替换dva的功能。
770 0
基于springboot+vue.js+uniapp的成人教育APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的成人教育APP附带文章源码部署视频讲解等
74 2
|
9月前
Vue3+Vite+Js项目搭建之二:vite.config.js 构建
Vue3+Vite+Js项目搭建之二:vite.config.js 构建
182 1
|
5月前
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
371 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等