el-card 高度固定,滚动
时间: 2024-12-18 08:30:00 浏览: 18
`el-card` 是 Element UI 中的一个卡片组件,它本身默认是不会设置高度固定的。如果你想让 `el-card` 的内容区域有一个固定的高并允许内部内容滚动,你可以通过 CSS 或者 Vue.js 的绑定属性来实现。
1. 使用 CSS:
可以给 `.el-card__body` 设置 `height` 和 `overflow-y: auto;`。例如:
```css
.el-card__body {
height: 300px;
overflow-y: auto;
}
```
这会让 `el-card` 的内容区域最大高度限制为300px,并当内容超过这个高度时开始滚动。
2. 使用 Vue.js 指令 (v-bind):
如果是在 Vue 组件中动态控制高度,可以这样做:
```html
<el-card v-bind:class="{ 'height-fixed': isFixed }">
<!-- 内容 -->
</el-card>
```
然后在你的 Vue 实例中设置 `isFixed` 根据需要调整高度,如:
```js
data() {
return {
isFixed: false, // 初始为false
};
},
methods: {
toggleHeightFixed() {
this.isFixed = !this.isFixed;
},
},
```
当调用 `toggleHeightFixed()` 方法时,`el-card` 的高度会切换为固定值或自由滚动。
阅读全文