el-dialog高度设置滚动条
时间: 2023-09-24 12:05:49 浏览: 134
如果el-dialog的内容高度超过了el-dialog的高度,就会自动出现滚动条。
如果您想手动设置el-dialog的高度并且在内容高度超过el-dialog高度时也要出现滚动条,可以使用以下CSS代码:
```
.el-dialog {
max-height: 400px; /* 设置最大高度 */
overflow-y: auto; /* 让内容超过最大高度时出现滚动条 */
}
```
其中,max-height可以设置您想要的最大高度,如果内容高度不超过最大高度,就不会出现滚动条。而overflow-y: auto;则是在内容高度超过最大高度时出现纵向滚动条。
相关问题
el-dialog设置滚动条
要在 el-dialog 中设置滚动条,你可以使用以下步骤:
1. 首先,在 el-dialog 标签上添加一个 `:show-scrollbar` 属性,将其设置为 `true`,以显示滚动条。例如:
```html
<el-dialog :show-scrollbar="true">
<!-- 对话框内容 -->
</el-dialog>
```
2. 然后,在对话框的内容部分添加一个包装容器,例如使用 `<div>` 元素,给它设置一个固定的高度和 CSS 属性 `overflow-y: auto`。这将创建一个可滚动的区域。例如:
```html
<el-dialog :show-scrollbar="true">
<div style="height: 300px; overflow-y: auto;">
<!-- 对话框内容 -->
</div>
</el-dialog>
```
在这个例子中,容器的高度被设置为300px,你可以根据需要调整高度。
这样,你就可以在 el-dialog 中设置滚动条了。记得将对话框内容放在一个可滚动的容器内部。
el-dialog里自定义滚动条
el-dialog里自定义滚动条可以通过CSS样式来实现。可以使用sass或less写法或原生写法来实现。下面是两种写法的示例代码:
1. sass或less写法:
```css
.el-dialog__wrapper .el-dialog__body {
/* 必须有高度 */
height: 400px;
/* 自动出现滚动条 */
overflow: auto;
/* 滚动条样式 */
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background: #f5f5f5;
}
}
```
2. 原生写法:
```css
.el-dialog__wrapper .el-dialog__body {
/* 必须有高度 */
height: 400px;
/* 自动出现滚动条 */
overflow: auto;
}
.el-dialog__wrapper .el-dialog__body::-webkit-scrollbar {
width: 5px;
}
.el-dialog__wrapper .el-dialog__body::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
.el-dialog__wrapper .el-dialog__body::-webkit-scrollbar-track {
background: #f5f5f5;
}
```