横向滚动条
使用了ElementPlus的组件模板
Scrollbar 滚动条 | Element Plus (element-plus.org)
<template>
<el-scrollbar>
<div class="scrollbar-flex-content">
<p v-for="item in 50" :key="item" class="scrollbar-demo-item">
{{ item }}
</p>
</div>
</el-scrollbar>
</template>
<style scoped>
.scrollbar-flex-content {
display: flex;
}
.scrollbar-demo-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 50px;
margin: 10px;
text-align: center;
border-radius: 4px;
background: var(--el-color-danger-light-9);
color: var(--el-color-danger);
}
</style>
这里的框颜色可能显示不出来,可以更换颜色这两行为:
background:rgb(237,245,255);
color:rgb(84,156,253);
纵向滚动条
在需要滚动的组件里加入属性
style="max-height: 400px; overflow: auto;"
例如
<el-main style="max-height: 400px; overflow: auto;">
其他的内容
</el-main>