美文网首页
el-input回车-自动刷新页面

el-input回车-自动刷新页面

作者: 小鱼儿_逆流而上 | 来源:发表于2023-09-25 11:05 被阅读0次
    小鱼儿心语: 你不得不逼着自己更优秀,因为身后有许多人等着看你的笑话。所以要对自己狠一点,逼自己努力,再过五年你将会感谢今天发狠的自己、恨透今天懒惰自卑的自己。
    问题原因:

    form表单中只有一个输入框的时候,在输入框中按下回车就是提交该表单并且会自动刷新页面。知道原因就好解决了。

    解决方法:

    el-form上加上@submit.native.prevent来阻止原始提交事件,就是阻止默认刷新页面,但回车事件依旧会触发。
    <el-form @submit.native.prevent>

    方法解释:

    @submit.native.prevent
    submit 顾名思义就是提交
    .native 表示对一个组件绑定系统原始事件
    .prevent 表示提交以后不刷新页面

    • el-input 绑定键盘enter事件
    <el-form :model="queryParams" ref="queryRef" :inline="true" @submit.native.prevent>
        <el-form-item prop="content">
            <el-input
                v-model="queryParams.content"
                placeholder="请输入标准内容"
                clearable
                @keyup.enter="handleQuery"
                @change="handleQuery"
            >
               <template #prepend>标准内容</template>
            </el-input>
        </el-form-item>
    </el-form>
    

    在开发中我会不定时的更新一些小功能, 或者是踩过的坑,如果对你有帮助,我会很开心哒~~///(^v^)\~~

    相关文章

      网友评论

          本文标题:el-input回车-自动刷新页面

          本文链接:https://www.haomeiwen.com/subject/jvofbdtx.html