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

茶荼2023-09-08 14:28

javascript 复制代码

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

上传代码回车执行handleSearch方法的时候会自动刷新页面

解决办法：

1.如果el-form-item里面包含了两个及以上表单元素，回车事件就不会自动刷新，可以给其中一个input设置display:none属性

javascript 复制代码

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

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

javascript 复制代码

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