欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

elementUI 输入框回车刷新页面

程序员文章站 2022-06-07 15:34:57
...

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>