vue antd 怎么让ant-table-body里面的overflow: scroll失效
时间: 2023-10-04 11:13:56 浏览: 199
基于 vxe-table 表格的适配插件,用于兼容 ant-design-vue 组件库
要禁用 `antd` 中 `ant-table-body` 组件的 `overflow: scroll` 样式,你可以使用以下方法:
1. 使用 `scoped` 样式:在 Vue 单文件组件的 `<style>` 标签中添加 `scoped` 特性,以将样式限定在当前组件范围内。这样可以确保样式不会影响到 `ant-table-body` 组件。
```vue
<style lang="less" scoped>
.ant-table-body {
overflow: visible !important; // 使用 !important 关键字来覆盖原有样式
}
</style>
```
2. 使用全局样式覆盖:如果你希望在整个应用程序中禁用 `ant-table-body` 的 `overflow: scroll` 样式,可以在全局样式表中进行覆盖。
在你的全局样式表(如 `App.vue` 或 `main.scss`)中添加以下样式:
```css
.ant-table-body {
overflow: visible !important; // 使用 !important 关键字来覆盖原有样式
}
```
通过以上两种方法之一,你可以禁用 `ant-table-body` 组件中的 `overflow: scroll` 样式,以实现你的需求。请注意,使用 `!important` 可能会导致一些样式冲突,因此请确保在使用时小心谨慎。
阅读全文