Element plus中el-input 框回车触发页面刷新问题及解决方案

在Element Plus中，如果你遇到了el-input框在按下回车键时引起页面刷新的问题，这通常是因为回车键默认触发了表单的提交行为。为了解决这个问题，你可以通过以下几种方法来阻止回车键引起的页面刷新：

1. 使用@submit.prevent修饰符来阻止表单默认的提交行为。

<template>
  <el-form @submit.prevent>
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

2. 如果el-input不在el-form内部，你可以直接在el-input上添加@submit.prevent。

<template>
  <el-input v-model="inputValue" @submit.prevent placeholder="请输入内容"></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

3. 如果你不希望使用表单，但仍然希望有回车提交的行为，可以监听键盘事件，并在回车键按下时执行特定的逻辑。

<template>
  <el-input v-model="inputValue" @keyup.enter="handleEnter" placeholder="请输入内容"></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleEnter() {
      // 在这里执行你的逻辑
    }
  }
};
</script>

以上方法可以有效地解决el-input框在按下回车键时引起页面刷新的问题。