Vue 动态表格
控制表格中每一列的显示与否实现步骤1.vue+Element UI写控制组件2. 为表格每一列绑定v-if值3. 值监听函数
控制表格中每一列的显示与否
效果图： 实现思想： 首先利用element Ui写好组件，然后通过选择组件状态触发监听函数改变v-if绑定表格的值，达到展示与否效果
实现步骤
1.vue+Element UI写控制组件
<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值
<el
-table
-column
:show
-overflow
-tooltip
="true" header
-align
="center" prop
="collTaskName" label
="任务名称" width
=""
v
-if="a"></el
-table
-column
>
3. 值监听函数
当控制组件的值改变时，触发监听函数改变每个v-if绑定的值，实现展示与否
watch
:{
province
: function(val
){
if(val
==false){
vm
.b
=false
}else if(val
==true){
vm
.b
=true
}
}
}
