element-ui表格组件table实现列的动态显示与隐藏

element-uitable组件表格实现列的动态显示和隐藏但是有时候表格显示的列太多，一屏显示不下，需要手动滚动滚动条才能查看。事实上，在系统的实际使用中，不同的用户关注的栏目不同，不一定要把所有的栏目都显示出来。因此可以开发一个可以配置表格要显示的列的功能，这样只显示感兴趣的列，页面上不需要显示不关心的列，提高了用户经验。需求要求表格中显示的列可以动态配置，默认显示所有列。思路是在data中定义列数据，然后将列数据动态绑定到模板中，提供一组用于设置列显示的复选框。默认选中所有列，即默认显示所有列。当某列被选中或未被选中时，更新模板中动态绑定的列数据，实现页面只显示需要显示的列开发状态首先，根据思路，可以确定几种状态：tableDatatabledatatableColumns表中的所有列数据，列数据的唯一来源bindTableColumns绑定到模板中的列数据，即需要展示的列数据。checkedTableColumns复选框选中的列数据实现然后开始实现：首先，写一个基础表。(参考element-ui基本形式)然后，优化模板。在data中定义表的列数据tableColumns，通过模板中的v-for指令遍历列数据。二、优化列数据tableColumns，为每一列添加一个show属性，表示该列的显示和隐藏。默认为true，即默认显示所有列。再次添加一个计算属性bindTableColumns，过滤掉需要显示的列，并绑定到模板上。这样后续配置columns只会操作tableColumns中column的显示和隐藏属性show，bindTableColumns会自动更新，页面会自动重新渲染。然后实现表格列配置模板，用于设置列的显示和隐藏。此处使用一组复选框，默认选中所有可配置的表格列。在线例子：CodePen:element-uitable表格组件设置显示列的显示和隐藏