当前位置: 代码迷 >> 综合 >> vue滚动条<el-aside>和<el-scrollbar>滚动条没有出现
  详细解决方案

vue滚动条<el-aside>和<el-scrollbar>滚动条没有出现

热度:92   发布时间:2023-09-29 06:51:43.0

代码:

<template><div><el-scrollbar style="width: 100%; height:100%"><el-row v-for="(item, index) in imageViewList" :key="index" :gutter="3"><el-col :span="8" v-for="(subItem, subIndex) in 12"><div style="border: 1px #8c939d; text-align:center"><el-card><img style="padding: 1px"src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"class="image"><div style="padding: 1px;"><span>描述</span></div></el-card></div></el-col></el-row></el-scrollbar></div>
</template>

解决办法,将<el-scollbar>设置到div外面:或者给div设置高度和宽度

正确代码:

<template><el-scrollbar style="width: 100%; height:100%"><div><el-row v-for="(item, index) in imageViewList" :key="index" :gutter="3"><el-col :span="8" v-for="(subItem, subIndex) in 12"><div style="border: 1px #8c939d; text-align:center"><el-card><img style="padding: 1px"src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"class="image"><div style="padding: 1px;"><span>描述</span></div></el-card></div></el-col></el-row></div></el-scrollbar></template>

或:

<template><div  style="width: 100%; height:100%"><el-scrollbar><el-row v-for="(item, index) in imageViewList" :key="index" :gutter="3"><el-col :span="8" v-for="(subItem, subIndex) in 12"><div style="border: 1px #8c939d; text-align:center"><el-card><img style="padding: 1px"src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"class="image"><div style="padding: 1px;"><span>描述</span></div></el-card></div></el-col></el-row></el-scrollbar></div>
</template>