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>