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

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>

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

根据引用\[1\],el-autocomplete是一个HTML组件,用于创建一个自动完成的输入框。根据引用\[2\],可以通过在el-autocomplete上添加属性popper-append-to-body="false"来解决change事件不生效的问题。这个属性的作用是将渲染后的元素放入#app元素。代码示例如下: ``` <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" style="width: 300px" :popper-append-to-body="false"></el-autocomplete> ``` 然而,根据引用\[3\]的描述,将popper-append-to-body属性设置为false解决了change事件不生效的问题,但是导致了原本设置的下拉框的内边距失效。为了解决这个问题,可以使用popper-class属性。popper-class属性用于设置下拉列表的类名。在组件加入popper-class="acc-search",可以将自定义的CSS样式应用于下拉列表。代码示例如下: ``` <el-autocomplete class="voucher-subject-input" :ref="'inputcredit_2_'+index" :popper-append-to-body="true" popper-class="acc-search" :class="{ 'subject-opacity': voucher.items\[index\].showText }" v-model="voucher.items\[index\].subjectName" value-key="name" :fetch-suggestions="querySearch" :highlight-first-item="true" @blur="handleSelectBlur(voucher.items\[index\],index)" @select="handleSelectSubject($event,index)" @focus="handleFocusSubject($event,index)"> <template slot-scope="{ item }"> <el-button v-if="item.is_add" type="primary" plain style="width: 100%;position: absolute;bottom: 0px;left: 0px;" class="add-button" @click="accAddBtn()">添加</el-button> </template> </el-autocomplete> ``` 通过以上的修改,你应该能够解决el-autocomplete change事件不生效的问题,并且保持下拉框的内边距生效。 #### 引用[.reference_title] - *1* [vue组件之el-tree、el-select、el-autocompleteel-table篇](https://blog.csdn.net/qq_43977829/article/details/124166369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [el-autocomplete修改默认样式 不生效问题(已解决)](https://blog.csdn.net/Maxueyingying/article/details/121373387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【关于Element UIel-autocomplete组件】二、el-autocomplete组件解决@blur与@select事件冲突](https://blog.csdn.net/XujiRe/article/details/125413153)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值