vue实现element ui table 隐藏行数据

最新推荐文章于 2023-09-01 16:30:09 发布

m0_59273159

最新推荐文章于 2023-09-01 16:30:09 发布

阅读量3.2k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59273159/article/details/126976229

版权

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

通过设置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>