vue.js - Vue组件在卡内被切断

Question

这发生在最终组件之一上

这就是我想要的样子

这是卡的代码，我不知道为什么上传被切断我已经尝试为avatar-uploader类和它周围的 div 添加一个固定的高度，但到目前为止没有任何帮助。

<el-card>
    <el-form class="form" :model="ruleForm" :rules="rules" ref="ruleForm" role="form">
        <h1>Editando Curso</h1>

        <el-form-item label="Nombre del curso" class="labels" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="Seleccione la materia requerida">
            <el-select style="width: 80%;" v-model="matery" prop="materia" name="materia"
                    placeholder="Seleccionar la materia"
                    clearable>
                <el-option
                    v-for="item in materia"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
          </el-select>
          <el-checkbox v-model="strict" prop="strict" name="strict">Obligatorio</el-checkbox>
          <el-checkbox v-if="matery" v-model="remover" prop="remover">Remover</el-checkbox>
      </el-form-item>

      <el-form-item label="Resumen" prop="resumen">
          <el-input type="textarea" v-model="ruleForm.summary"></el-input>
      </el-form-item>

      <el-form-item label="Descripcion" prop="description" class="vue-editor-form">
          <vue-editor v-model="ruleForm.description">
              <el-input v-model="ruleForm.description"></el-input>
          </vue-editor>
      </el-form-item>

      <el-row :gutter="20">
          <el-col :md="8">
              <el-form-item label="Precio" prop="price">
                  <el-input-number controls-position="right" class="full-width" :min="1"
                          v-model="ruleForm.price"></el-input-number>
              </el-form-item>
          </el-col>
          <el-col :md="8">
              <el-form-item label="Horas" prop="hours">
                  <el-input-number controls-position="right" class="full-width" :min="1"
                          v-model="ruleForm.hours"></el-input-number>
              </el-form-item>
          </el-col>
          <el-col :md="8">
              <el-form-item label="Nota mínima" prop="min_grade">
                  <el-input-number controls-position="right" class="full-width" :min="1"
                          v-model="ruleForm.min_grade"></el-input-number>
              </el-form-item>
          </el-col>
      </el-row>

      <div class="line">
          <el-upload
              class="avatar-uploader"
              action="/api/courses/upload-image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img class="avatar" v-if="imageUrl" :src="imageUrl"/>
              <img class="avatar" v-else :src="ruleForm.image"
                      @error="this.src='https://www.logistec.com/wp-content/uploads/2017/12/placeholder.png'">
          </el-upload>
      </div>

      <el-row class="text-right">
          <a href="/courses">
              <el-button type="danger" plain>Cancelar</el-button>
          </a>
          <el-button icon="el-icon-check" type="danger" plain @click="submit(ruleForm)">
                  Guardar Edición
          </el-button>
      </el-row>
    </el-form>
</el-card>

相关的css，<el-card>上面有一个类，但该类不存在，所以我删除了它

.text-right {
    text-align: right;
}
.full-width {
    width: 100% !important;
}
.labels {
    text-align: center;
    padding-top: 2%;
}
.line {
    text-align: center;
    width: 100%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 250px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

标签： vue.js