elementUI中input回车触发页面刷新问题和解决方法

在使用ElementUI的Input组件时，如果你遇到了回车触发了页面刷新的问题，这通常是因为表单的默认提交行为。

解决方法：

1. 阻止回车键的默认行为。你可以通过在input元素上添加@keyup.enter.native事件监听器来实现。
2. 如果存在表单，你还需要阻止表单的默认提交行为。可以通过在表单元素上添加@submit.prevent事件监听器来实现。

示例代码：

<template>
  <el-form @submit.prevent>
    <el-form-item>
      <el-input
        v-model="inputValue"
        @keyup.enter.native="handleEnter"
        placeholder="请输入内容"
      ></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleEnter() {
      // 处理回车事件
    }
  }
};
</script>

在这个例子中，我们阻止了表单的默认提交行为，并且在input元素上添加了@keyup.enter.native事件监听器，以便在用户按下回车键时调用handleEnter方法。这样就可以避免不必要的页面刷新。