关于el-form中的el-input回车自动刷新页面

<el-form>
    <el-form-item>
        <el-input
          v-model.trim="tablePage.keyWords"
          size="small"
          placeholder="请输入"
          @keyup.enter.native="searchFn()"
          clearable
        >
          <el-button
            @click="searchFn()"
            slot="prepend"
            icon="el-icon-search"
          ></el-button>
        </el-input>
    </el-form-item>
</el-form>

回车会因为页面的自动刷新

可能是因为在回车键按下时，表单提交事件被触发，从而导致整个页面重新加载。可以通过在 @keyup.enter.native阻止默认的表单提交行为

解决方案：

给其中一个input设置display:none属性

<el-form>
    <el-form-item>
        <el-input style="display:none"></el-input>
        <el-input
          v-model.trim="tablePage.keyWords"
          size="small"
          placeholder="请输入"
          @keyup.enter.native="searchFn()"
          clearable
        >
          <el-button
            @click="searchFn()"
            slot="prepend"
            icon="el-icon-search"
          ></el-button>
        </el-input>
    </el-form-item>
</el-form>

给el-form的设置@submit.native.prevent="return false;"方法

<el-form>
    <el-form-item @submit.native.prevent="return false;">
        <el-input
          v-model.trim="tablePage.keyWords"
          size="small"
          placeholder="请输入"
          @keyup.enter.native="searchFn()"
          clearable
        >
          <el-button
            @click="searchFn()"
            slot="prepend"
            icon="el-icon-search"
          ></el-button>
        </el-input>
    </el-form-item>
</el-form>