如何修改el-upload组件的多张上传图片垂直滚动显示?

发布于 2022-09-12 13:40:09 字数 1321 浏览 12 评论 0

已在.el-upload-list修改添加样式,无效

<style scoped>
>>> .el-upload-list{
    height: 126px;
    flex-wrap: wrap;
    overflow-y: auto;
    }
</style>
<el-upload action="#" list-type="picture-card" :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
        <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
  <span class="el-upload-list__item-actions">
    <span
      class="el-upload-list__item-preview"
      @click="handlePictureCardPreview(file)"
    >
      <i class="el-icon-zoom-in"></i>
    </span>
    <span
      v-if="!disabled"
      class="el-upload-list__item-delete"
      @click="handleDownload(file)"
    >
      <i class="el-icon-download"></i>
    </span>
    <span
      v-if="!disabled"
      class="el-upload-list__item-delete"
      @click="handleRemove(file)"
    >
      <i class="el-icon-delete"></i>
    </span>
  </span>
</div>
    </el-upload>
<el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
![image.png](/img/bVcLszF)

如何修改让上传的图片滚动显示并显示滚动条?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

苍风燃霜 2022-09-19 13:40:09

已解决,单独定义class样式,设置宽高,设置滚动条

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文