.columnOption{position:fixed;z-指数：20；顶部：0；左：0；宽度：100%；高度：100%；背景色：rgba(0,0,0,0.3);显示：弹性；弹性方向：行反转；.content{宽度：100px；高度：100%；背景色：rgb(203,223,198)；.head{宽度：100%；高度：44px；border-bottom:1pxsolid#000;显示：弹性；证明内容：居中；对齐项目：居中；字体大小：12px；}.body{宽度：100%；高度：计算（100%-88px）；框大小：边框框；填充顶部：10px；溢出-y：自动；.items{宽度：100%；高度：100%；溢出-y：自动；显示：弹性；弹性方向：列；.el-checkbox{宽度：100%；高度：28px；行高：28px；底部边距：14px；显示：内联块；字体系列：平方SC；字体样式：正常；字体粗细：正常；字体大小：14px；颜色：#000；溢出：隐藏；文本溢出：省略号；空白：nowrap；框大小：边框框；左填充：14px；}.el-checkbox:hover{背景颜色：#f5f7fa;}}}.footer{宽度：100%；高度：44px；border-top:1pxsolid#000;显示：弹性；证明内容：居中；对齐项目：居中；}}}//控制淡入淡出效果.fade-enter-active,.fade-leave-active{transition:opacity0.3s;}.fade-enter,.fade-leave-to{opacity:0;}问题描述这两天产品新增一个需求：因为列数多在el-table中，我想增加一个配置列的功能，配置面板中有很多复选框，每个复选框对应一个列名。勾选复选框，对应列出现，取消勾选，对应列隐藏。单击“保存列配置”以记住要显示的列和要隐藏的列。下次进入页面时，仍然会看到相应的复选框，勾选的复选框对应表格中显示的列，未勾选的复选框为表格中要隐藏的列。话不多说，先来看看最终效果图：实现的思路是：我们通过vue的监听功能监听复选框的变化。当复选框发生变化时，我们查看相应的复选框。检查和未检查的值。如果选择为true，则显示相应的列，如果选择为false，则隐藏相应的列。当然，因为vue是数据的双向绑定，所以我们可以让对应的列隐藏和表隐藏一一对应。html部分的图解分析js部分的图解分析总结思路就是配置，然后监听变化。最后是案例的完整代码。细心的朋友发现这里的存储是存储在本地的。其实更优的方式是让后端写一个接口，通过接口将对应列的配置数据存入数据库，然后初始化和检索。使用。但是思路是一样的，建议先保存数据库案例的完整代码查看编辑选择显示文字段
