Element-动态控制el-table的行的显示与隐藏

<el-table border stripe :data="form.serialDateList" style="width: 100%" :row-class-name="rowClassName">  // rowClassName
  <el-table-column type="index" width="60" align="center" label="序号" />
    
  <el-table-column min-width="100" align="center" label="操作">
     <template #default="{$index}">
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="delSerialItem($index)" />
     </template>
  </el-table-column>
  
</el-table>

。。。
<script>
  methods: {
    delSerialItem(index) {
      // this.form.serialDateList.splice(index, 1)  // 方式一：硬删除
      this.form.serialDateList[index].delFlag = 1;  // 方式二：软删除
    },
  
    // 行的样式控制方法，通过这个回调方法控制隐藏显示
    rowClassName: function ({ row }) {
      if (row.delFlag !== 0) {
        return "hidden-row";
      }
      return '';
    },
  },
</script>

。。。
<style lang="scss">
  .el-table .hidden-row {
    display: none;
  }
</style>