vue实现element ui table 隐藏行数据_elementui的table隐藏行

数据不变，在页面展示上隐藏条件

通过设置row-class-name添加样式将某些行隐藏

 
<template>
  <el-table
    :data="tableData2"
    style="width: 100%"
    :row-class-name="tableRowClassName">
  </el-table>
</template>
 
   <style lang="scss">
    .el-table .hidden-row {
      display: none;
    }
  </style>
<script>
  export default {
    methods: {
      tableRowClassName: function (row, index) {
        if (row.date === "条件") {
          return 'hidden-row';
        }
        return '';
      }
    }
  }
</script>