el-form含输入框,选择框上传按钮, 支持回车提交表单

 <el-form

        :model="formUpload"

        ref="formUploadRef"

        :rules="rulesUpload"

        label-width="99px"

        :inline="false"

        size="normal"

        @keypress.native.enter.prevent="handleEnterPress"

      >

        <el-form-item label="教案名称:" prop="name">

          <el-input

            v-model="formUpload.name"

            maxlength="30"

            show-word-limit

          ></el-input>

        </el-form-item>

        <el-form-item label="上传教案:" size="normal" prop="type">

          <el-select

            v-model="formUpload.type"

            placeholder="请选择"

            clearable

            filterable

            style="width: 100%"

            @change="changeType"

          >

            <el-option

              v-for="item in typeList"

              :key="item.value"

              :label="item.label"

              :value="item.value"

            >

            </el-option>

          </el-select>

        </el-form-item>

        <el-form-item

          v-if="formUpload.type == 'ppt'"

          label="上传pdf:"

          size="normal"

          prop="url"

        >

          <el-upload

            class="upload-demo"

            :loading="loadingFile"

            action="#"

            :on-remove="handleRemove"

            multiple

            :limit="1"

            :on-exceed="handleLimit"

            :on-success="handleSuccess"

            :before-upload="beforeUploadFilePdf"

            :file-list="fileList"

            :http-request="uploadHandle"

          >

            <el-button size="small" type="primary">点击上传</el-button>

            <div slot="tip" class="el-upload__tip">上传pdf文件</div>

          </el-upload>

        </el-form-item>

        <el-form-item

          v-if="formUpload.type == 'word'"

          label="上传word:"

          size="normal"

          prop="url"

        >

          <el-upload

            class="upload-demo"

            :loading="loadingFile"

            action="#"

            :on-remove="handleRemove"

            multiple

            :limit="1"

            :on-exceed="handleLimit"

            :on-success="handleSuccess"

            :before-upload="beforeUploadFile"

            :file-list="fileList"

            :http-request="uploadHandle"

          >

            <el-button size="small" type="primary">点击上传</el-button>

            <div slot="tip" class="el-upload__tip">上传word文件</div>

          </el-upload>

        </el-form-item>

        <el-form-item label="" size="normal">

          <el-button @click="addEditDialog = false">取消</el-button>

          <el-button type="primary" ref="confirmBtn" @click="enterAdd"

            >确认</el-button

          >

        </el-form-item>

      </el-form>

 methods: {

    handleEnterPress(event) {

      // 阻止默认行为

      event.preventDefault();

      // 手动触发表单提交操作

      this.enterAdd();

    },

enterAdd(){

//提交操作

}

}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值