我爱模板网 > 建站教程 > 前端框架 >  ElementUI表格动态显示列正文

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等。这里就不深入了。

部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:'vue-cli-service'不是内部或外部命令,也不是可运行的程序或批处理文件 下一篇:Vue进阶,效率和优雅我都要
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢