element ui - 如何控制el-table某一行数据不显示

---

场景

业务上可能会有一些场景，表格中的数据根据状态变化展示。

例如：有一组数据状态有 is_edit=true 和 is_edit=false；is_edit=true 数据是用户编辑状态中的数据，列表展示并同时提交给后台；is_edit=false 数据是已保存的数据，页面不展示但是也要提交到后台。当前后台接口参数就是一个list数组。

方法

element-ui 暂时并没有表格渲染前的生命周期函数，目前只能通过 定义两个数组 或 手动过滤数据。

定义两个数组分别为：提交给后台的总数据 list 和 显示数据（即 is_edit=true 的数据），但是这种方法逻辑比较复杂，尤其是修改显示数据后，还需手动同步到总数据 list 上，所以更推荐手动过滤数据。

简单的过滤逻辑我们可以直接在 template 上添加过滤条件：

<template>
  <el-table
    :data="tableData.filter((v) => v.is_edit)" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="grade" label="成绩" width="150"> </el-table-column>
  </el-table>
</template>