动态设置element表格header展示列

最近有一个需求是需要动态配置表格展示项，记一下处理思路，大致效果如图

<el-table-column label="作业ID" width="100">
   <template slot="header">
     <el-popover trigger="click" @show="onShow" ref="popover">
       <div>
         <el-checkbox-group v-model="tableShowColsInner">
           <el-checkbox v-for="item in tableCols" :key="item" style="display: block" :label="item">
           </el-checkbox>
         </el-checkbox-group>
       </div>
       <i class="el-icon-s-operation" slot="reference" style="cursor: pointer"></i>
     </el-popover>
   </template>
   <template slot-scope="scope">
     {{ scope.row.id }}
   </template>
</el-table-column>

在element表格内需要使用v-if v-if="tableShowCols.indexOf('作业名称') !== -1"

可以配置成组件进行调用，配置项设置全部column,默认column和已选定column，存入localStorage处理，监听选中变动及时存入