ElementUI表格动态显示列

工作中有需求，用ElementUI开发的表格字段太多，需要实现下面的效果，即动态显示列：


其实实现起来很简答，即用一组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等。这里就不深入了。