ant design vue 隐藏table中的columns一项且不占位置
时间: 2023-09-08 08:15:04 浏览: 55
如果你想隐藏 Table 中的某一列,同时不占用它原来的位置,可以按照以下步骤进行操作:
1. 在 Table 中的 `columns` 数组中,找到需要隐藏的列,将其 `width` 属性设置为 `0`,如下所示:
```js
<template>
<a-table :columns="columns" :data-source="data"></a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{ title: '姓名', dataIndex: 'name', width: 100 },
{ title: '年龄', dataIndex: 'age', width: 0 },
{ title: '地址', dataIndex: 'address', width: 200 },
],
data: [
{ key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
{ key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
{ key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
]
}
}
}
</script>
```
2. 在 CSS 中添加以下样式,来隐藏宽度为 0 的列:
```css
.ant-table-cell[style*="width:0"] {
display: none;
}
```
这样就可以隐藏 `age` 列,并且不会占用原来的位置了。这里使用了 CSS 选择器来选择宽度为 0 的列,然后将其 `display` 属性设置为 `none`,从而实现了隐藏。需要注意的是,这种方法只适用于列的宽度已知的情况,如果列的宽度是自适应的,就需要使用其他的方法来实现隐藏了。