ant design vue 隐藏table一项且不占位置
时间: 2023-08-04 12:32:27 浏览: 127
你可以使用 CSS 的 `display` 属性来隐藏 Table 中的某一列,同时不占用它原来的位置。具体做法是:
1. 给需要隐藏的列添加一个特定的 class,比如 `hide-column`;
2. 在 CSS 中设置该 class 的 `display` 属性为 `none`。
假设你的 Table 如下所示:
```html
<template>
<a-table>
<a-table-column title="姓名" dataIndex="name"></a-table-column>
<a-table-column title="年龄" dataIndex="age"></a-table-column>
<a-table-column title="地址" dataIndex="address"></a-table-column>
</a-table>
</template>
```
如果你想隐藏第二列(年龄),可以按照以下步骤进行操作:
1. 在第二列的 `a-table-column` 标签中添加 `class="hide-column"` 属性,如下所示:
```html
<a-table-column title="年龄" dataIndex="age" class="hide-column"></a-table-column>
```
2. 在 CSS 中添加以下样式,来隐藏 `hide-column` 类的列:
```css
.hide-column {
display: none;
}
```
这样就可以隐藏 `age` 列,并且不会占用原来的位置了。
阅读全文