2020年下半年，屏幕上有几张图：有人在骑车看书，有人在骑车用电脑，有人在堆垛床上的书……“边骑车边玩电脑”的学生被称为“翻书王”，上了热搜榜。渐渐地，这些学生毕业了，卷王带着卷子走向社会，带领着其他人一起打滚。越来越多的人在做论文。意义之轮的现象出现了。造轮子本来是个好东西，但是随着内卷的出现，造轮子逐渐进化到一个极端，出现了凭空造轮子、重复造轮子之类的东西，既不能为企业服务，反而也使内卷现象越来越严重，真正的苦难是无法言喻的。分析当前业务中遇到的问题，进而产生新的思路和结论，用技术手段提高工作效率和开发速度，才是真正有意义的轮子，没有白费。CMS（内容管理系统）一词由来已久，通常指内容管理系统，是介于WEB前端和后端办公系统或进程之间的软件系统。在开发cms后台的过程中，最常用的应该是Table，比如antd的table：这应该是后台管理系统开发中最常用的组件。没有Table，不好意思说是cms系统。但是在稍微大一点的业务中会有一个很普遍的问题，就是一个数据源会有很多字段需要展示。如果都陈列起来，会有一种非常不美观和凌乱的感觉，而且会很刺眼。同时，不同的人希望看到不同的领域。例如，学生A希望看到标题0、1、2、3，学生B希望看到标题1、2、3、4，学生C希望看到标题7、8、9、10等。这是一个非常个性化的需求。如果要让后端同学参与，会增加后端同学的工作量，同时前端的工作也不会相应减少。得益于浏览器的localstorage存储能力，前端完全不需要后端同学的参与就可以实现。首先，既然是antd的Table组件，我们必须在已有功能的基础上实现这个需求，所以需要在Table组件的基础上再建一层，既不能影响Table的显示，又可以还可以自定义显示列。那么我们可以列出需求：在不影响Table显示的情况下，可以选择自定义显示列，可以对显示列进行排序，对业务没有其他影响（这个是最重要的）。既然需求已经明确了，那么我们就可以开始整个流程了，具体实现就不多说了。我们可以看一下实现后的效果：打磨的初步需求已经实现，可以高枕无忧了。这怎么可能？想太多！！！是的，后来产品说现在数据展示栏太多了，比以前多了三倍，选择展示栏的时候要分组，不然都挤在一起不好找，严重影响工作效率up！卧槽！最糟糕的是，人们说这会影响工作效率。你为什么现在谈论这么严重的问题？为什么不早点提出要求？如果早说的话，肯定早就实现了，不会出现影响工作效率的问题。啊!！！我真是个口是心非，心狠手辣，可是我知道，小蝌蚪才是心狠手辣的人，我不配！！话多了会哭的，还是抓紧时间提出要求吧。看效果：嗯，完美，就是这个效果。对Table的封装进行了二次修改。在不影响之前使用的基础上，增加了支持分组的能力。我真的很棒！>然而，快乐的时光总是那么短暂~~有一天，我们的另一个平台发现，嘿嘿，你的功能真好用，能不能给我们用一下，嗯，最简单直接的方法就是复制粘贴.复制粘贴到一半突然来了一个人要用这个功能，WTMD很头疼。话虽这么说，让我们把它打包成一个npm包。我将它发布为一个组件包给你，你可以直接安装使用。npmimanage-tablecopycode拿走它并使用它。使用npmimanage-tableoryarnaddmanage-table复制代码。manage-table组件具有相应的peerDependencies。如果没有安装，需要手动安装相应的依赖："peerDependencies":{"@ant-design/icons":"^4.6.4","antd":"^4.12.0","react":"^17.0.0","react-beautiful-dnd":"^13.1.0"}复制代码用法-:直接引用，使用内置设置代码如下：importManageTablefrom"manage-table";import'./App.css'；从“react”导入React；functionApp(){constmockColumns=newArray(50).fill('').map((_item:string,index)=>{return{dataIndex:'title'+index,key:'title'+index,title:'title'+index,show:index%3===0,};});mockColumns.push({dataIndex:'action',key:'action',title:'operation',show:true,});return(
