Vue +ElementUI 实现表格的动态展示

控制表格中每一列的显示与否

效果图：

实现思想：
首先利用element Ui写好组件，然后通过选择组件状态触发监听函数改变v-if绑定表格的值，达到展示与否效果

实现步骤

1.vue+Element UI写控制组件

// An highlighted block
 <el-form-item style="float:right">
                    <el-popover placement="bottom" width="300" trigger="click">
                        <el-col ><el-checkbox v-model="taskName" >任务名称</el-checkbox></el-col>
                        <el-col ><el-checkbox v-model="province" >省份</el-checkbox></el-col>
                        <el-col ><el-checkbox v-model="lastFile" >采集成功最后一个文件名</el-checkbox></el-col>
                        <el-col ><el-checkbox v-model="lastFileTime" >采集成功的最后一个文件时间</el-checkbox></el-col>
                        <el-col ><el-checkbox v-model="taskType" >任务类型</el-checkbox></el-col>
                        <el-col ><el-checkbox v-model="taskCode" >任务编码</el-checkbox></el-col>
                        <el-col ><el-checkbox v-model="downloadFolder" >下载目录</el-checkbox></el-col>
                        <el-col ><el-checkbox v-model="upFolder" >上传目录</el-checkbox></el-col>
                        <el-col ><el-checkbox v-model="upLastTime" >下载目录最后一个文件的到达时间</el-checkbox></el-col>
                        <el-button slot="reference" type="primary" icon="el-icon-menu"></el-button>
                    </el-popover>
                </el-form-item>

2. 为表格每一列绑定v-if值

// An highlighted block
  <el-table-column :show-overflow-tooltip="true" header-align="center" prop="collTaskName" label="任务名称" width=""
                                 v-if="a"></el-table-column>

3. 值监听函数

当控制组件的值改变时，触发监听函数改变每个v-if绑定的值，实现展示与否

// An highlighted block
  watch:{
            province : function(val){
                if(val==false){
                    vm.b=false
                }else if(val==true){
                    vm.b=true
                }
            }
            }