Vue使用Element的表格如何隐藏一行和隐藏一列

前言

最近做一个上传文件列表，列表中要显示上传进度，文件大小等等信息，还可以进行取消上传，重新上传，预览文件以及删除文件的操作。

问题：删除文件时如何隐藏表格的该行数据

题外话：或许你们会说不会将该行数据剔除出去吗？但目前我做的这个功能组件不允许这样干，哎~~

原因：因为需要显示上传进度，这其中的数据牵涉到严格的顺序（索引下标index），所以删除文件的时候不能将其从数据数组中剔除出去，否则就会导致之后上传文件出错。所以用删除标识，有删除标识的就要从表格从隐藏起来，所以一开始感觉无从下手，惭愧…

隐藏一行数据的方法：

想了很久突然醒悟过来，我可以用计算属性啊，当时恨不得锤死自己… myFiles是计算属性，files是所有上传文件数据

<el-table :data="myFiles" empty-text="暂无上传文件" style="width: 100%"> <el-table-column prop="name" label="文件名" min-width="180"> </el-table-column> <el-table-column prop="size" label="大小" min-width="80"> </el-table-column> <el-table-column prop="time" label="上传时间" min-width="100" > </el-table-column> <el-table-column label="上传进度" min-width="180" > <template slot-scope="scope"> <el-progress style="width:80%;display: inline-block;" :text-inside="true" :stroke-width="24" :percentage="scope.row.persent" :color="scope.row.status==='success'?'#67C23A':(scope.row.status==='error'?'#F56C6C':'#409EFF')"></el-progress> </template> </el-table-column> <el-table-column label="上传状态" min-width="100" > <template slot-scope="scope"> {{scope.row.status==='success'?'上传成功':(scope.row.status==='error'?'上传失败':(scope.row.status==='cancle'?'已取消':'上传中'))}} </template> </el-table-column> <el-table-column label="操作" min-width="80"> <template slot-scope="scope"> <el-button size="mini" type="danger" v-if="scope.row.status==='loading'&&scope.row.persent!==99" @click="cancel(scope.$index,false)"> 取消上传 </el-button> <el-button size="mini" type="primary" v-if="scope.row.status!=='loading'&&scope.row.status!=='success'" @click="toUploadFile(scope.$index,true)"> 重新上传 </el-button> <el-button size="mini" type="success" v-if="scope.row.status==='success'" @click="toSee(scope.$index)"> 预览文件 </el-button> <el-button size="mini" type="danger" v-if="scope.row.status!=='loading'" @click="cancel(scope.$index,true)"> 删除 </el-button> </template> </el-table-column> </el-table> //用计算属性筛选出没删除的数据进行展示，不对文件数据进行更改 computed:{ myFiles:function(){ console.log(this.files) return this.files.filter(item => item.status!=='detele') } },

效果图： 没删除之前： 删除之后，数据还是三个，只显示两个：

隐藏一列数据的方法：

这个很简单的，只需要在el-table-column加个v-if/v-show判断下就好了

<el-table-column v-if="....." prop="size" label="大小" min-width="80"> </el-table-column>