控制表格中每一列的显示与否
效果图:
实现思想:
首先利用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
}
}
}