element中 el-input 中的 autocomplete 属性怎么使用，为什么不生效

最新推荐文章于 2025-03-13 19:23:53 发布

satuo@

最新推荐文章于 2025-03-13 19:23:53 发布

阅读量6.8k

点赞数 2

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/a1783118/article/details/128018432

版权

本文详细介绍了Element UI中el-input组件的autocomplete属性的使用方法，特别指出如何通过正确设置button为input类型来实现表单自动填充功能，适合前端开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element中 el-input 中的 autocomplete属性怎么使用

想整体学一遍 element，学到 input 中看到了 autocomplete 这个属性，没有过多的介绍，我就自己试着写了写

<el-form :model="ruleForm" label-width="100px">
   <el-form-item label="账号">
     <el-input v-model="ruleForm.number" autocomplete="on" name="number"></el-input>
   </el-form-item>
   <el-form-item label="密码">
     <el-input v-model="ruleForm.pass" autocomplete="on" name="pass"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="submit" @click="submitForm()">提交</el-button>
   </el-form-item>
 </el-form>

//data中定义的变量
 ruleForm: {
   	  pass: '',
      number: '',
  }
  
// 表单提交的方法
submitForm() {
 	alert('submit!');
 },

我把 autocomplete 属性打开了，页面效果是这样的，当我输入账号：111，密码：222之后，点击提交，成功了之后刷新一下页面，重新点击，账号或者密码没有自动补全，于是我各种百度搜索这个东西怎么用
在这里插入图片描述

到最后终于解决了这个问题，原来在于提交的那个按钮我用的是button按钮，这样是错的，应该写成input

<el-form-item>
    <el-input type="submit" @click="submitForm()">提交</el-input>
</el-form-item>

这样就实现了自动补齐的功能，如下图
在这里插入图片描述