其实实现起来很简答,即用一组check-box的value,来绑定每一列,通过v-if来控制当前列是否显示。
1、左上角筛选下拉checkbox:
<el-popover placement="bottom" width="300" trigger="click"> <el-col><el-checkbox v-model="showTaskName">任务名称</el-checkbox></el-col> <el-col><el-checkbox v-model="showProvince">省份</el-checkbox></el-col> <el-col><el-checkbox v-model="showLastFile">采集成功最后一个文件名</el-checkbox></el-col> <el-col><el-checkbox v-model="showLastFileTime">采集成功的最后一个文件时间</el-checkbox></el-col> <el-col><el-checkbox v-model="showTaskType">任务类型</el-checkbox></el-col> <el-col><el-checkbox v-model="showTaskCode">任务编码</el-checkbox></el-col> <el-col><el-checkbox v-model="showDownloadFolder">下载目录</el-checkbox></el-col> <el-col><el-checkbox v-model="showUpFolder">上传目录</el-checkbox></el-col> <el-col><el-checkbox v-model="showUpLastTime">下载目录最后一个文件的到达时间</el-checkbox></el-col> </el-popover>2. 为表格每一列绑定v-if值
<el-table-column prop="province" label="省份" v-if="showProvince"></el-table-column>当然,这种方法比较繁琐,可以简化。比如下拉筛选的字段,可以直接读取table的字段名,这样就不用再很多v-model等。这里就不深入了。
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!