Table组件不显示某行，如何实现？（基于iview）

其实，想要不显示某行，直接把data里的这项删掉即可。不过，我也想到了一个新思路。通过设置样式，就当是研究琢磨啦，有兴趣的可以继续往下读哦！

1、首先，iview的文档里有介绍

table组件有一些用于特定样式设置的属性：

想要使某行不显示，可以用row-class-name属性实现。

2、直接上vue文件的代码

html部分的代码

<Table
  :columns="columns"
  :data="dataList"
  :row-class-name="tableRowClassName"
>
</Table>
复制代码

js部分的代码

methods: {
  tableRowClassName (row, index) {
    if (row.hidden) {
      return 'hidden-row'
    } else {
      return ''
    }
  }
}
复制代码

css部分的代码

// 为hidden-row类设置样式为隐藏
.ivu-table .hidden-row {
    display: none;
  }
复制代码

结合业务需求场景，需要隐藏某行的时候，把dataList对应的data的hidden属性设为true即可。

3、更多思考：table特定样式的设置

如果需要实现一些其他的样式，也可以按照这样的思路
比如iview的文档：
html

js

css