elementUI 输入框回车刷新页面

最新推荐文章于 2024-08-13 10:33:00 发布

_let

最新推荐文章于 2024-08-13 10:33:00 发布

阅读量4.9k

点赞数 6

分类专栏： vue elementUI

本文链接：https://blog.csdn.net/qq_39759115/article/details/91948165

版权

vue 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

elementUI

6 篇文章 0 订阅

订阅专栏

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>