Table component does not display a row, how to implement? (Based on iView)

In fact, if you don’t want to show a row, you can just delete this item in data. But I also came up with a new idea. By setting the style, it is considered, interested can continue to read oh!

1. First of all, iView is described in the documentation

The Table component has some properties for specific style Settings:

To make a line invisible, use therow-class-nameProperty implementation.

2, directly on the vUE file code

HTML section of the code

<Table
  :columns="columns"
  :data="dataList"
  :row-class-name="tableRowClassName"
>
</Table>
Copy the code

Js part of the code

methods: {
  tableRowClassName (row, index) {
    if (row.hidden) {
      return 'hidden-row'
    } else {
      return ''
    }
  }
}
Copy the code

CSS section of the code

// Set style for hidden-row class to hidden.ivu-table. hidden-row {display: none; }Copy the code

When a row needs to be hidden, set the hidden property of data corresponding to dataList to true.

3, more thinking: table specific style Settings

If you need to implement some other styles, you can also follow the same idea as the iView document:

html

js

css