当左侧aside的数据越来越多时候,就会超过屏幕,现在需要给asids添加一条滚动条
.el-aside {
height: calc(100vh - 70px);
}
<el-scrollbar style="height: 100%" :native="false">
<div v-for="o in 20" :key="o" class="text item" style="margin-bottom:1%">
<el-button type="text">{{"选择批次"+o}}</el-button>
</div>
</el-scrollbar
对aside设置固定的高即可实现操作,之前没有设置高度,会越来越比屏幕高。
<template>
<section>
<el-container >
<el-aside class="el-aside" width="20%" style="background-color: rgb(255,255,255);margin-bottom:1%">
<el-card class="box-card" style="margin-bottom:1%">
<el-scrollbar style="height: 100%" :native="false">
<div v-for="o in 20" :key="o" class="text item" style="margin-bottom:1%">
<el-button type="text">{{"选择批次"+o}}</el-button>
</div>
</el-scrollbar>
</el-card>
</el-aside>
<el-main width="80%" style="margin-top: -1%">
<p v-else class="textShow index_main" >请先在左侧选择批次号!</p>
</el-main>
</el-container>
</section>
</template>
<script>
export default {
name: "data",
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
.el-aside {
height: calc(100vh - 70px);
}
.textShow{
font-size:30px;
color:red;
font-weight:bold;
}
.text {
font-size: 20px;
}
.item {
padding: 18px 0;
}
.box-card {
width: 100%;
}
</style>