使用element-ui框架的积累(二)

点击表单重置按钮，实现表单数据重置

<template>
  <div class="login-area container-area">
    <h3 class="set-center">
      <router-link to="/login">登录</router-link>
      <el-divider direction="vertical"></el-divider>
      <router-link to="/register">注册</router-link>
    </h3>
    <el-form ref="form" :rules="formRules" :model="form">
      <el-form-item prop="username">
        <el-input
          placeholder="用户名"
          v-model="form.username"
          clearable
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          placeholder="密码"
          v-model="form.password"
          clearable
          show-parssword
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row>
          <el-col :span="17">
            <el-input
              placeholder="验证码"
              v-model="form.code"
              prefix-icon="el-icon-mobile"
            ></el-input>
          </el-col>
          <el-col :span="7">
            <div class="code-area">
              <Identity :changeCode.sync="identifyCode"></Identity>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

 

使用element-ui自带的表单方法resetFields

 

onReset() {

      this.$refs.form.resetFields();

}