el-input使用autocomplete保留输入记录，实现自动补全|el-form调用原生submit

框架：vue、element-plus
语言：ts

前言

项目中有个输入框需要保存历史记录，以便于人员操作。
然而网上大部分都是去掉历史记录的方法，实际上element-plus中, autocomplete属性默认就是off，根本不用手动关闭。

框架代码实现

实现要点如下：

• 在 <el-form> 标签上添加 @submit.prevent
• el-input设置autocomplete="on"和name属性
• 提交按钮el-button设置native-type="submit"

<el-form ref="validFormRef" label-width="auto" style="width: 640px" @submit.prevent>
  <el-form-item label="操作员:">
    <el-input
      v-model="operator"
      clearable
      autocomplete="on"
      name="operator"
      style="width: 248px;"
    ></el-input>
  </el-form-item>
  <div class="form-item-inline">
    <el-button @click="confirmOperator" native-type="submit">提交</el-button>
  </div>
</el-form>

W3C 标准定义：

当一个表单中只有一个单行文本输入字段时， 浏览器应当将在此字段中按下 Enter （回车键）的行为视为提交表单的请求。 如果希望阻止这一默认行为，可以在 标签上添加 @submit.prevent。

原生HTML实现

<form>
   <input  type="text" id="operator" name="operator"/>
   <input type="submit" value="提交" />
</form>