关于我在TAPD上看到我有个BUG el-form + 一个 el-input

这个是代码

<template>
  <el-dialog
    class="classifyDia"
    :title="componentTitle"
    :visible.sync="dialogVisible"
    width="30%">
    <el-form label-width="80px">
      <el-form-item label="分类名称">
        <el-input 
        v-model="tamplateMessage.templateName" 
        placeholder="输入名称,最长不超50字"
        maxlength="50">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="clockTemplate">取 消</el-button>
      <el-button type="primary" @click="sureData">确 定</el-button>
    </div>
  </el-dialog>
</template>

这个是测试写的

添加/新建数据，在弹窗添加数据，点击键盘enter键，出现情况是：页面刷新，不会添加任何数据

是否考虑一下点击enter键相当于“确定”

问题是我没有做键盘按下事件啊，连自己都一脸迷糊，于是一个一个进行检测。

首先做了键盘事件监听，确认键盘事件没有触发事件。对el-button进行检测，首先隐藏但页面刷新情况一样出现。

在检测过程中发现一个有趣的情况，就是在输入框获得光标前敲击Enter是不会刷新页面的，获得光标后敲击Enter是会刷新页面的。于是将el-input单独拿出来测试，重复操作，不会刷新页面。

那么问题就简单了，肯定跟el-form有关，因为form表单中只有一个input，将input当作了submit按钮了，被浏览器认为Enter可以触发sumbit事件

问题既然找到了,那么处理就简单了

1. 监听全局键盘事件---禁止Enter事件---return false 就得了---但不推荐
2. 不使用el-from就得了---那这个写来就毫无意义了
3. 最好的方法和推荐的方法就是---在el-form中添加 @submit.native.prevent

.native 表示对一个组件绑定系统原生事件

.prevent 表示提交以后不刷新页面

<template>
  <el-dialog
    class="classifyDia"
    :title="componentTitle"
    :visible.sync="dialogVisible"
    width="30%">
    <el-form label-width="80px" @submit.native.prevent>
      <el-form-item label="分类名称">
        <el-input 
        v-model="tamplateMessage.templateName" 
        placeholder="输入名称,最长不超50字"
        maxlength="50">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="clockTemplate">取 消</el-button>
      <el-button type="primary" @click="sureData">确 定</el-button>
    </div>
  </el-dialog>
</template>

问题就这么简单搞定了，主要还是细节没有处理好，写下来好好提醒自己