Element-ui阻止表單輸入框回車重新整理頁面
阿新 • • 發佈:2021-12-16
當一個form元素中只有一個輸入框時,在該輸入框中按下回車應提交該表單。
解決:在el-form便籤里加上 @submit.native.prevent 即可(vue3.x專案棄用.native, 使用@submit.prevent)
<template> <div> <el-form ref="form" :model="dataForm" label-width="80px" size="mini" @submit.prevent> <el-row> <el-col :span="6"> <el-form-item label="姓名"> <el-input type="text" v-model.trim="dataForm.name" placeholder="輸入姓名" @keyup.enter="nameChange" > </el-input> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script> import { reactive, toRefs } from 'vue' export default { name: 'dashboard', setup() { let data = reactive({ dataForm: { name: '' } }) const nameChange = () => { console.log("回車觸發") } let param = toRefs(data); return { ...param, nameChange } } } </script>