博客

当form表单中只有一个输入框时，监听键盘回车事件，此时点击回车会刷新整个页面

<el-form :model="appInfo" :rules="ruleData" ref="formRef">
        <p style="font-size: 20px; text-align: center">输入应用包名</p>
        <el-form-item class="margin-t30" label="" prop="appPackage">
          <el-input v-model="appInfo.appPackage" @keydown.enter.native="serachApp()"
            placeholder="请填写完整的应用包名，支持点击Enter键查询"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="serachApp()" style="width: 120px">查询
        </el-button>
      </div>

解决方法，需要在el-form处加上

@submit.native.prevent


就可以了

修改后代码

<el-form :model="appInfo" :rules="ruleData" ref="formRef" @submit.native.prevent>
        <p style="font-size: 20px; text-align: center">输入应用包名</p>
        <el-form-item class="margin-t30" label="" prop="appPackage">
          <el-input v-model="appInfo.appPackage" @keydown.enter.native="serachApp()"
            placeholder="请填写完整的应用包名，支持点击Enter键查询"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="serachApp()" style="width: 120px">查询
        </el-button>
      </div>