美文网首页
Antd 可编辑表格

Antd 可编辑表格

作者: 悄敲 | 来源:发表于2019-07-08 15:58 被阅读0次
可编辑表格效果图.png

最近接到一个小需求,将页面上的原本仅展示信息的表格增加一个功能,即支持直接在页面上进行编辑。原表格也是借助 antd 生成的,在查阅了官方文档后,发现官网给出的示例里居然就有可编辑表格,真是太贴心了。
可编辑表格的代码整体结构如下,首先是创建可编辑单元格 EditableCell 子组件,然后是创建可编辑表格 EditableTable (其中使用了子组件 EditableCell ),由于表格的原本功能仅仅是展示信息,并不包括接收用户输入(这是 Form 表单的职责),所以最后还需要用 Form.create() 封装一下。


代码整体结构.png
const EditableFormTable=Form.create()(EditableTable);

官网示例代码就不贴了,见链接https://ant.design/components/table-cn/#components-table-demo-edit-cell

项目中实际使用的可编辑表格在用户编辑完成点保存按钮后,先是通过 post 请求将新的数据保存到服务器(新的数据通过 post 请求的 body 传输),然后再通过 get 请求去获取新的数据,最后是更新 UI (这里看上去 get 请求更新数据显得有点多余,因为数据是本地修改的,所以在本地展示其实不必再去请求服务器,不过如果别人也在他的本地修改了数据,那这个机制就有必要了,便于数据同步)。相关代码如下:


同步数据代码.png

最后说下自己踩的一个关于 antd 的坑,就是如果不设置可编辑图表的各列宽度,那么在点击某行的“编辑”后,可能会造成所有行的高度都变大,这会导致用户点击某行的“编辑”后,由于前面各行高度也变大了,用户目标编辑的行会被挤到下面,影响体验,如图所示


所有行都变高.png

给各列设置宽度后(相对值或绝对值均可),就不会出现以上问题。找了好久的原因。。。

相关文章

  • Antd 可编辑表格

    最近接到一个小需求,将页面上的原本仅展示信息的表格增加一个功能,即支持直接在页面上进行编辑。原表格也是借助 ant...

  • 【antd】自定义实现可编辑表格

    之前用table组件的时候看到antd中的一个可编辑表格的实现,如下图: 使用的时候发现了一些问题:第一个是这个T...

  • 6.添加一个ui框架

    在react.js上使用antd-design antd-design antd-design 引入antd样式 ...

  • react antd的使用

    antd的使用 antd是一个组件库 安装antd$ npm install antd 安装babel-plugi...

  • antd的Modal可移动(可拖拽)

    通过第三方插件实现 https://www.npmjs.com/package/dragm[https://www...

  • 零基础学Axure8-表格的运用

    知识点: 1.编辑表格:添加/删除行、列; 2.编辑表格的样式:字体样式,背景,边距,行距; 3.在excel表中...

  • 三、react项目里引入AntDesign

    1、使用cnpm 安装antd,执行:cnpm install -D antd。 2、根据antd desig...

  • Antd Table 实现可编辑表格 ,含高级自定义用法

    后台管理系统非常很多用到可编辑表格,做完这个版本的项目,有许多收获,其中一项就是可编辑表格,表格行内编辑、新增、删...

  • 编辑表格

    马甲包序列表 序列号名称1小学英语外教2天才少儿英语3英语口语秀4魔力少儿英语551学英语6学霸英语7职场英语口语...

  • React材料清单

    antd的快捷引用 antd官方引用方法需要分别引入js和css,import Button from 'antd...

网友评论

      本文标题:Antd 可编辑表格

      本文链接:https://www.haomeiwen.com/subject/juaohctx.html