autocomplete 属性规定输入字段是否应该启用自动完成功能。(效果示例:https://www.w3school.com.cn/tiy/t.asp?f=html5_input_autocomplete

 

在vue+element中使用autocomplete要注意以下几点:

1、一定要用form的submit提交事件,才能使浏览器记住input里的值

2、<input/>一定要写name属性

3、element-ui默认是将autocomplete禁用的,打开的写法为:auto-complete="on"


 

具体代码如下:

    <!--stop的iframe阻止submit后跳转-->
    <iframe name="stop" class="none"></iframe>
    <!--stop的iframe阻止submit后跳转 end-->

    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"
             action="http://"
             target="stop">
      <el-row>
        <el-col :span="23">
          <el-form-item label="姓名" :prop="username">
            <el-input v-model="ruleForm.username"
                      auto-complete="on"
                      name="username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23" class="tr">
          <el-form-item class="no_m">
            <el-button :loading="loading" type="primary" @click="submitForm">
                提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
     submitForm() {
        // 一定要使用form的submit方法,才能记住input的输入值,auto-complete="on"才生效
        this.$refs['ruleForm'].$el.submit();
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            alert('success')
          } else {
            return false;
          }
        })
      }

注:需要用到from本身的submit方法,所以给from定义action,写http://不会跳转到具体页面。而target是为了提交后不跳到其他的页面。

Logo

前往低代码交流专区

更多推荐