el-table控制列的显示与隐藏

1、序言

        源码在下方,复制粘贴就可运行

        当一个表格太多列的时候,想要显示/隐藏一些列,目标效果如下:

  • 默认情况下,展示所有列

el-table控制列的显示与隐藏_第1张图片

  • 隐藏某一列

el-table控制列的显示与隐藏_第2张图片 

2、原理

(1)data数据有:tableData为表格数据,columns为表头数据,checkColumns为选中的数据,checkAll为是否全选,默认情况下展示所有的数据,为columns每一行数据添加是否显示的开关,默认都为true。

el-table控制列的显示与隐藏_第3张图片

 

(2)表格列判断是否显示的方法

(3) 判断是否全选以及刷新表格

el-table控制列的显示与隐藏_第4张图片

 

(4)选择列:复选框@change事件参数val,返回的是一个选中的复选框的数组

el-table控制列的显示与隐藏_第5张图片

 

(5)重置事件

        el-table控制列的显示与隐藏_第6张图片

 

(6)全选/反全选事件

el-table控制列的显示与隐藏_第7张图片 

3、源码

  这是组件,引用并注册该组件便可使用了


   

   

你可能感兴趣的:(前端,vue.js,elementui,前端)