<div>经历了千呼万唤，在无数刀友「爱的鞭策下」，表格功能终于上线了！ 现在登录墨刀，进入项目编辑区，点击「组件」，找到「表格」，拖拽进页面就可以直接使用。 <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;企业微信截图_269f5cbb-9ef3-4854-ab84-2af3d563e3c9.png&quot;,&quot;filesize&quot;:213802,&quot;height&quot;:1170,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9769/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_269f5cbb-9ef3-4854-ab84-2af3d563e3c9.png&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9769/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_269f5cbb-9ef3-4854-ab84-2af3d563e3c9.png&quot;,&quot;width&quot;:1936}" data-trix-content-type="image/png" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9769/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_269f5cbb-9ef3-4854-ab84-2af3d563e3c9.png"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9769/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_269f5cbb-9ef3-4854-ab84-2af3d563e3c9.png" width="1936" height="1170"><figcaption class="attachment__caption">企业微信截图_269f5cbb-9ef3-4854-ab84-2af3d563e3c9.png 208.79 KB</figcaption></a></figure> 那我们这次上的表格，究竟有哪些具体用处呢？ 可以先通过一个GIF来了解一下： <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/gif&quot;,&quot;filename&quot;:&quot;640.gif&quot;,&quot;filesize&quot;:52732,&quot;height&quot;:400,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9761/640.gif&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9761/640.gif&quot;,&quot;width&quot;:640}" data-trix-content-type="image/gif" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--gif"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9761/640.gif"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9761/640.gif" width="640" height="400"><figcaption class="attachment__caption">640.gif 51.5 KB</figcaption></a></figure> 看完gif不过瘾?视频内容来啦，而且下面有更详细的使用介绍： <figure data-trix-attachment="{&quot;content&quot;:&quot;<video controls=\&quot;\&quot; width=\&quot;800\&quot; height=\&quot;600\&quot;><source src=\&quot;https://cdn.modao.cc/picked/posts_table.mp4\&quot; type=\&quot;video/mp4\&quot;></video>&quot;}" data-trix-content-type="undefined" class="attachment attachment--content"><video controls="" width="800" height="600"><source src="https://cdn.modao.cc/picked/posts_table.mp4" type="video/mp4"></video><figcaption class="attachment__caption"></figcaption></figure></div><h1>后台产品+表格</h1><div>在日常工作生活中，我们使用的大量软件，除了 C 端，还有一些 B 端产品。 B 端产品组成中，后台类产品占了很大一部分，如电商管理系统、客服系统，或者是企业运营后台等等。<figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/jpeg&quot;,&quot;filename&quot;:&quot;WechatIMG119.jpeg&quot;,&quot;filesize&quot;:95274,&quot;height&quot;:876,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9770/WechatIMG119.jpeg&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9770/WechatIMG119.jpeg&quot;,&quot;width&quot;:1280}" data-trix-content-type="image/jpeg" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--jpeg"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9770/WechatIMG119.jpeg"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9770/WechatIMG119.jpeg" width="1280" height="876"><figcaption class="attachment__caption">WechatIMG119.jpeg 93.04 KB</figcaption></a></figure>（墨刀官方原型——企业ERP进销存管理后台） 而在制作 B 端产品原型中，最重要且常见的元素，就是表格了。它承担着查看和编辑这两个基础功能，发挥着展示更全面信息、体现数据间变化的作用。 那么，我们后台产品经理就需要合理化地设计表格，让他的用户更方便、高效地查看和编辑表格中的数据，提升效率。 针对表格查看功能，我们支持随意增减行列、单元格合并等等。 <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/gif&quot;,&quot;filename&quot;:&quot;640-2.gif&quot;,&quot;filesize&quot;:3493389,&quot;height&quot;:399,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9762/640-2.gif&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9762/640-2.gif&quot;,&quot;width&quot;:639}" data-trix-content-type="image/gif" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--gif"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9762/640-2.gif"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9762/640-2.gif" width="639" height="399"><figcaption class="attachment__caption">640-2.gif 3.33 MB</figcaption></a></figure> 针对表格编辑功能，我们支持拖拽填充、添加事件等等。 <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/gif&quot;,&quot;filename&quot;:&quot;640-3.gif&quot;,&quot;filesize&quot;:3386358,&quot;height&quot;:399,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9763/640-3.gif&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9763/640-3.gif&quot;,&quot;width&quot;:639}" data-trix-content-type="image/gif" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--gif"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9763/640-3.gif"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9763/640-3.gif" width="639" height="399"><figcaption class="attachment__caption">640-3.gif 3.23 MB</figcaption></a></figure> 希望有了表格功能的助力，可以让做 B 端的刀友们轻松一点~</div><h1>需求文档+表格</h1><div>很多产品经理经常抱怨说，写需求文档和做原型不能在一个软件里面完成，来回切换可太麻烦了，而且给别人看，还需要发两个链接...... 有了表格功能，这个问题就可以大大改善了。 比如说，版本更新信息，直接写在表格里。交付客户、老板时，一下子就知道变动在哪了。 <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;WechatIMG120.png&quot;,&quot;filesize&quot;:89551,&quot;height&quot;:448,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9771/WechatIMG120.png&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9771/WechatIMG120.png&quot;,&quot;width&quot;:1080}" data-trix-content-type="image/png" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9771/WechatIMG120.png"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9771/WechatIMG120.png" width="1080" height="448"><figcaption class="attachment__caption">WechatIMG120.png 87.45 KB</figcaption></a></figure> 内部查看的功能列表也能用表格做出来，推进项目更容易，开发看得也方便。 <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/jpeg&quot;,&quot;filename&quot;:&quot;WechatIMG121.jpeg&quot;,&quot;filesize&quot;:58991,&quot;height&quot;:452,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9772/WechatIMG121.jpeg&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9772/WechatIMG121.jpeg&quot;,&quot;width&quot;:1080}" data-trix-content-type="image/jpeg" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--jpeg"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9772/WechatIMG121.jpeg"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9772/WechatIMG121.jpeg" width="1080" height="452"><figcaption class="attachment__caption">WechatIMG121.jpeg 57.61 KB</figcaption></a></figure></div><h1>素材广场+表格</h1><div>基于新的表格功能，素材广场上线了 Element 的表格组件包（Element 是一套由饿了么团队为开发者、设计师和产品经理准备的桌面端组件库）、修改了Ant Design 的相关组件。 <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/jpeg&quot;,&quot;filename&quot;:&quot;WechatIMG122.jpeg&quot;,&quot;filesize&quot;:48138,&quot;height&quot;:862,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9773/WechatIMG122.jpeg&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9773/WechatIMG122.jpeg&quot;,&quot;width&quot;:1217}" data-trix-content-type="image/jpeg" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--jpeg"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9773/WechatIMG122.jpeg"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9773/WechatIMG122.jpeg" width="1217" height="862"><figcaption class="attachment__caption">WechatIMG122.jpeg 47.01 KB</figcaption></a></figure> 在这组新上的表格素材组件中，涵盖了丰富的日历、表格形态，覆盖了常用的使用场景。 <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/jpeg&quot;,&quot;filename&quot;:&quot;WechatIMG123.jpeg&quot;,&quot;filesize&quot;:91936,&quot;height&quot;:952,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9774/WechatIMG123.jpeg&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9774/WechatIMG123.jpeg&quot;,&quot;width&quot;:1080}" data-trix-content-type="image/jpeg" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--jpeg"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9774/WechatIMG123.jpeg"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9774/WechatIMG123.jpeg" width="1080" height="952"><figcaption class="attachment__caption">WechatIMG123.jpeg 89.78 KB</figcaption></a></figure> 只需进入素材广场，搜索「表格」，就能找到哦～</div><h1>Web 设计+表格</h1><div>表格是一种常见的信息展示工具，也是 Web 页面布局的重要组成部分。Web 中的表格设计应该注重什么呢？ 墨墨姐私以为关键是体现在可视化和易操作两个方面，用人话说就是“简单、直观、好上手”。 而设计风格，根据网站 designmodo ，总结的 2020 年 11 大 Web 设计和 UI 趋势来看，今年的主流还是走简约风，毕竟 less is more。 给大家参考几个现在主流的网站的 Web 设计： 如，Ace Admin <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/jpeg&quot;,&quot;filename&quot;:&quot;WechatIMG124.jpeg&quot;,&quot;filesize&quot;:67818,&quot;height&quot;:1080,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9775/WechatIMG124.jpeg&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9775/WechatIMG124.jpeg&quot;,&quot;width&quot;:1242}" data-trix-content-type="image/jpeg" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--jpeg"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9775/WechatIMG124.jpeg"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9775/WechatIMG124.jpeg" width="1242" height="1080"><figcaption class="attachment__caption">WechatIMG124.jpeg 66.23 KB</figcaption></a></figure> Admin LTE <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/jpeg&quot;,&quot;filename&quot;:&quot;WechatIMG126.jpeg&quot;,&quot;filesize&quot;:100456,&quot;height&quot;:583,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9776/WechatIMG126.jpeg&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9776/WechatIMG126.jpeg&quot;,&quot;width&quot;:1080}" data-trix-content-type="image/jpeg" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--jpeg"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9776/WechatIMG126.jpeg"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9776/WechatIMG126.jpeg" width="1080" height="583"><figcaption class="attachment__caption">WechatIMG126.jpeg 98.1 KB</figcaption></a></figure> 墨墨姐发现我们表格组件里所提供的外观，充分匹配了当前表格的主流设计和趋势，设计师们靠模板就能设计出高保真的 Web 原型，高效工作就这么简单～ <figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/gif&quot;,&quot;filename&quot;:&quot;640-4.gif&quot;,&quot;filesize&quot;:3454197,&quot;height&quot;:341,&quot;href&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9766/640-4.gif&quot;,&quot;url&quot;:&quot;https://cloudfront.modao.cc/uploads4/post_images/0/9766/640-4.gif&quot;,&quot;width&quot;:639}" data-trix-content-type="image/gif" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--gif"><a href="https://cloudfront.modao.cc/uploads4/post_images/0/9766/640-4.gif"><img src="https://cloudfront.modao.cc/uploads4/post_images/0/9766/640-4.gif" width="639" height="341"><figcaption class="attachment__caption">640-4.gif 3.29 MB</figcaption></a></figure> 看完上述描述，刀友们对这次表格功能还满意吗？现在，赶紧去工作区体验起来吧～ 对了，在 2 月 5 日到 3 月 1 日期间，我们还有几个小福利哦～ 1.凡是新创建的企业版用户，即可免费获取 1 个月试用时长。 2.凡是奋战在防疫一线的公益组织、医疗机构、社会团体、个人志愿者等，即可联系客服获取 2 个月的企业版免费使用时长。 3.凡是各大高校的在校师生，购买墨刀时均可享受教育优惠。 墨刀近期还更新了很多功能，具体可查看<a href="https://modao.cc/app/changelog">更新日志</a>。 最后，祝刀友们情人节快乐～ </div>

官方发布表格！上了！

分享墨刀 Sketch 插件开发总结