elementUI 输入框回车刷新页面

elementUI 输入框回车刷新页面

如何出现？

当 el-form 表单内只有一个 el-input 输入框时，在输入框内回车就会触发表单的提交事件。

<el-form :model="formData">
	<el-form-item
          label="服务名称"
          :rules="[
              {
                required: true,
                message: '请输入服务名称',
                trigger: 'blur'
              },
              { validator: validateServiceName, trigger: 'blur' }
            ]"
          prop="serviceName"
        >
          <el-input
            v-model="formData.serviceName"
            placeholder="请输入服务名称"
          />
        </el-form-item>
</el-form>

解决

在 el-form 上加上 @submit.native.prevent 属性就可以阻止回车提交事件：

<el-form :model="formData"  @submit.native.prevent>
	<el-form-item
          label="服务名称"
          :rules="[
              {
                required: true,
                message: '请输入服务名称',
                trigger: 'blur'
              },
              { validator: validateServiceName, trigger: 'blur' }
            ]"
          prop="serviceName"
        >
          <el-input
            v-model="formData.serviceName"
            placeholder="请输入服务名称"
          />
        </el-form-item>
</el-form>