elelment-ui回车绑定方式与区别

1、@keyup.enter.native

使用场景：

• 在 el-input中使用

<div class="searchWrap">
  <el-input v-model="searchVal" placeholder="请输入接口名称" class="input-with-select" clearable @keyup.enter.native="search">
    <el-button slot="append" size="small" @click="search">搜 索</el-button>
  </el-input>
</div>

• 在el-form中使用

<el-form :model="form" :inline="true" class="demo-form-inline">
  <el-form-item label="表名称" prop="tableName">
    <el-input v-model="form.tableName" clearable placeholder="请输入方案名称" @keyup.enter.native="toQuery"/>
  </el-form-item>
  <el-form-item label="数据源名称" prop="dataSource ">
    <el-select v-model="form.dataSource " filterable clearable placeholder="请选择">
      <el-option
        v-for="(item, index) in sqlOption"
        :key="index"
        :label="item.dbname"
        :value="item.dbid"/>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button
      size="small"
      type="warning"
      icon="el-icon-search"
      @click="toQuery"
    >搜索</el-button>
    <el-button
      size="small"
      type="success"
      icon="el-icon-refresh-right"
      @click="resetForm"
    >重置</el-button>
  </el-form-item>
</el-form>

2、@submit.native.prevent

使用场景：

<el-form :inline="true" class="demo-form-inline" @submit.native.prevent="toQuery">
  <el-form-item label="方案名称" prop="name">
    <el-input v-model="searchName" clearable placeholder="请输入方案名称" @input="searchName = formatInput.formatCn(searchName)"/>
  </el-form-item>
  <el-form-item>
    <el-button
      size="small"
      type="warning"
      icon="el-icon-search"
      @click="toQuery"
    >搜索</el-button>
    <el-button
      size="small"
      type="success"
      icon="el-icon-refresh-right"
      @click="resetForm"
    >重置</el-button>
  </el-form-item>
</el-form>

总结：在el-form中只有一个输入框的时候使用@submit.native.prevent这种方式，在el-form中不止有一个输入框的时候使用@keyup.enter.native方式进行提交，在不使用el-form时，给输入框绑定回车事件使用@keyup.enter.native方式