element+Vue el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面

vue的写法就是el-form上添加阻止默认事件 @submit.native.prevent

1
2
3
4
5
6
7
8
9
10
<el-form
            ref="queryForm"
            label-width="120px"
            :model="form"
            :rules="rules"
            :show-message="false"
            size="mini"
            @submit.native.prevent
        >
</el-form>

 项目中使用的是jsx的语法,修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
return (
            <el-form
                {...{
                    class: "", // ofxh
                    on: {
                        input: noop,
                         
                    },
                    nativeOn:{//监听事件
                        submit: handlePrevent //阻止事件
                    },
                    props: {
                        model: this.formData,
                        rules: rules,
                        inline: this.inline,
                        disabled: this.disabled,
                        "label-position": this.labelPosition,
                        "label-width": this.labelWidth,
                        "label-suffix": this.labelSuffix,
                        "validate-on-rule-change": false
                    },
                    ref: "form",
                    key: "form"
                }}
            >
                {formItemList}
                {this.$slots.inline}
            </el-form>
        );
 
阻止事件
const handlePrevent=function(event){event.preventDefault()};

  

 

posted @   世界我快乐  阅读(94)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示