elementUI 输入框回车刷新页面

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39759115/article/details/91948165

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>
展开阅读全文

没有更多推荐了,返回首页