Vue+Element-ui中按键事件绑定问题

1、el-input绑定键盘事件不生效

错误代码:

<el-input v-model="studentvo.sname" placeholder="请输入学生姓名" style="width:20%" @keyup.enter="selectAll"></el-input>

修改后的代码:

<el-input v-model="studentvo.sname" placeholder="请输入学生姓名" style="width:20%" @keyup.enter.native="selectAll"></el-input>

原因：element-ui是封装组件所以el标签是自定义标签

解决方案：自定义标签绑定键盘事件需要加上native原生事件修饰符

2、表单只有一个输入框时绑定enter键触发事件时刷新页面

错误代码:

<el-form ref="form" label-width="80px">
    <el-form-item label="班级名">
         <el-input @keydown.enter='GoOn' v-model="classes"></el-input>
    </el-form-item>
</el-form>

修改后的代码:

<el-form ref="form" label-width="80px">
    <el-form-item label="班级名">
         <el-input @keydown.enter.prevent='GoOn' v-model="classes"></el-input>
    </el-form-item>
</el-form>

原因：表单的默认提交是enter所以触发了按键事件时会刷新页面

解决方案：加上prevent修饰符取消默认事件

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6932