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

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

<el-form
            ref="queryForm"
            label-width="120px"
            :model="form"
            :rules="rules"
            :show-message="false"
            size="mini"
            @submit.native.prevent
        >
</el-form>

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

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 @ 2023-02-09 17:27  世界我快乐  阅读(40)  评论(0编辑  收藏  举报