el-upload删除时导致页面样式错乱！！

最新推荐文章于 2024-08-07 10:03:38 发布

不怕不管

最新推荐文章于 2024-08-07 10:03:38 发布

阅读量809

点赞数

分类专栏： element UI 文章标签： vue html

本文链接：https://blog.csdn.net/weixin_45654407/article/details/103849605

版权

element UI 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

      <el-row class="head_image">
        <el-col :span="2" class="head_image_wrap">
          <el-upload
            class="upload"
            :class="{ hide: hideBusiness }"
            :action="getUploadUrl"
            :file-list="fileBusinessList"
            list-type="picture-card"
            :limit="1"
            accept="image/*"
            :on-success="handleBusinessSuccess"
            :on-error="handleBusinessError"
            :on-change="handleBusinessUpload"
            :on-preview="handleBusinessPreview"
            :on-remove="handleBusinessRemove"
            :before-upload="beforeAvatarUpload"
          >
            <img class="have_img" v-if="!getUserInfo.avatar" src="@/assets/imgs/head_image.png" alt />
          </el-upload>
        </el-col>
        <el-col class="head_image_name" :span="19">
          <p>
            <span class="first_span">姓名</span>
            <span v-if="type == '2'">{{ getUserInfo.realName || "/" }}</span>
            <span v-if="type == '5'">{{ getUserInfo.serviceName || "/" }}</span>
          </p>
          <p>
            <span class="first_span">手机号</span>
            <span>{{ getUserInfo.phoneMobile }}</span>
          </p>
        </el-col>
      </el-row>
      <el-row class="table_row">
        <el-col :span="8" class="password_img_wrap">
          <img src="@/assets/imgs/password.png" />
        </el-col>
        <el-col :span="16" class="password_edit">修改登录密码</el-col>
        <el-col :span="4" class="password_edit_button">
          <el-button @click="handleEdit('password')" v-if="getMenuBtn.includes('password')">修改密码</el-button>
        </el-col>
      </el-row>

上传的时候是好好的，结果一到删除，就变成这样了！气坏了我！太丑了呀！

这也导致页面太丑了吧！！
百思不得奇解，还以为是el-upload渐变的功能影响的，我就把它去掉了，F12发现是line-height影响了它。
把line-height改成和图片的一样高，结果还是没用！！
后面发现，原来是忘了给这个头像的父元素加上高度，导致line-height不能在同一水平上！
解决方法：
给父元素加上固定高度，或者直接继承父元素的高度100%！

    .head_image {
      height: 110px;
      margin-bottom: 90px;
      margin-top: 40px;
      .head_image_wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;//就是这个高度没给到而导致的样式错乱！
        margin-right: 30px;
        .el-upload {
          width: 110px;
          height: 110px;
          .have_img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .head_image_name {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        // align-items: center;
        p {
          display: flex;

          .first_span {
            display: block;
            width: 50px;
            margin: 0 20px;
            text-align: right;
          }
        }
      }
    }