重置功能按钮功能实现详细步骤:

第一:首先给el-form添加ref属性。

  <el-form :inline="true" :model="queryParams" ref="queryForm">

第二：在点击重置按钮执行的方法中，执行如下功能代码片段

 reset(){
        # 重新设置请求参数实体属性
        this.queryParams = {
          memberName: undefined,
          typeId: undefined,
        # 指定表单属性值重置
        this.$refs["form" ].resetFields();
效果演示:
 
默认展示页:
 
检索效果页:
 
 重置效果页:
 
Vue页面源码:
 
<style>
</style>
<template>
    <el-col :span="19">
      <el-form :inline="true" :model="queryParams" ref="queryForm">
        <el-form-item label="姓名">
          <el-input v-model="queryParams.memberName"  placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item >
          <div style="text-align:right">
            <!--自定义searchHandler函数-->
            <el-button type="primary" @click="searchHandler">查询</el-button>
            <!---->
            <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <p style="text-align: left; margin-bottom: 10px;">
      <el-button type="primary" @click="dialogFormAdd = true">添加</el-button>
    <el-row>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          v-for="(data,index) in tableHeader"
          :key="index"
          :prop="data.prop"
          :label="data.label"
          :min-width="data['min-width']"
          :align="data.align">
        </el-table-column>
        <el-table-column
          prop="memberSex"
          label="性别">
          <template slot-scope="scope">{{ scope.row.memberSex === 1 ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column
          prop="memberStatic"
          label="会员状态">
          <template slot-scope="scope">{{ scope.row.memberStatic === 1 ? '正常' : '不正常' }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="240">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="toEdit(scope)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteMember(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageIndex"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=pagination.total>
      </el-pagination>
    </el-row>
    <el-dialog title="添加学生" :visible.sync="dialogFormAdd">
      <el-form :model="member">
        <el-form-item label="姓名" >
          <el-input v-model="member.memberName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAdd = false">取 消</el-button>
        <el-button type="primary" @click="add(student)">确 定</el-button>
    </el-dialog>
    <el-dialog title="修改学生" :visible.sync="dialogFormEdit">
      <el-form :model="member">
        <el-form-item label="姓名" >
          <el-input v-model="member.memberName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button type="primary" @click="edit(student)">确 定</el-button>
    </el-dialog>
</template>
<script>
  export default{
    name: 'member',
    data () {
      return {
        tableData: [],
        dialogFormEdit: false,
        dialogFormAdd:false,
        member: {
          memberId: '',
          memberName: '',
          memberPhone: '',
          memberAge: '',
          typeName: '',
          nenberDate: '',
          memberStatic:'',
          memberbalance:'',
          memberxufei:''
        queryParams:{
          memberName:'',
          typeId:''
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0,
        tableHeader: [
            prop: 'memberId',
            label: '会员编号',
            align: 'left'
            prop: 'memberName',
            label: '名称',
            align: 'left'
            prop: 'memberPhone',
            label: '电话',
            align: 'left'
            prop: 'memberAge',
            label: '年龄',
            align: 'left'
            prop: 'membertypes.typeName',
            label: '卡类型',
            align: 'left'
            prop: 'nenberDate',
            label: '录入日期',
            align: 'left'
            prop: 'memberbalance',
            label: '会员余额',
            align: 'left'
            prop: 'memberxufei',
            label: '到期日期',
            align: 'left'
    methods: {
      init () {
        var self = this
        this.$axios({
          method:'post',
          url:'/menber/query',
          data:{"pageNumber":this.pagination.pageIndex,"pageSize":this.pagination.pageSize,"ktype": 0},
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
        }).then(res => {
          console.log(res);
          self.pagination.total = res.data.total;
          self.tableData = res.data.rows;
          .catch(function (error) {
            console.log(error)
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageIndex = 1;
        this.init();
      handleCurrentChange(val) {
        this.pagination.pageIndex = val;
        this.init();
      add (student) {
        this.$axios({
          method:'post',
          url:'/student/insert',
          data:{'name': student.name, 'sex':student.sex,'age':student.age,'college':student.college,'className':student.className},
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
        }).then(res => {
          this.$message.success('添加成功')
          this.dialogFormAdd = false
          this.init()
          .catch(function (error) {
            console.log(error)
      toEdit (scope) {
        this.student.sid = scope.row.sid
        this.student.name = scope.row.name
        this.student.sex = scope.row.sex
        this.student.age = scope.row.age
        this.dialogFormEdit = true
      edit (student) {
        var params ={
          'sid' : student.sid,
          'name' : student.name,
          'sex' :  student.sex,
          'age' : student.age
        this.$axios({
          method:'post',
          url:'/student/update',
          data:params,
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
        }).then(res => {
          this.$message.success('修改成功')
          this.dialogFormEdit = false
          this.init()
        }).catch(function (error) {
          console.log(error)
      deleteMember (scope) {
        debugger;
        if (!scope.row.memberId) {
          this.tableData.splice(scope.$index, 1)
        } else {
          this.$confirm('确认是否删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
            .then(() => {
              console.log(scope.row.memberId)
              this.$axios.get('/menber/delete/' + scope.row.memberId).then(res => {
                this.$message.success('删除成功')
                this.init()
                .catch(function (error) {
                  console.log(error)
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
      searchHandler() {
        var self = this
        this.$axios({
          method:'post',
          url:'/menber/query',
          data:{"pageNumber":this.pagination.pageIndex,"pageSize":this.pagination.pageSize,"ktype": 0, "hyname":this.queryParams.memberName},
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
        }).then(res => {
          console.log(res);
          self.pagination.total = res.data.total;
          self.tableData = res.data.rows;
          .catch(function (error) {
            console.log(error)
      reset(){
        this.queryParams = {
          memberName: undefined,
          typeId: undefined,
        this.$refs["form" ].resetFields();
    mounted: function () {
      this.init()
</script>
                    业务场景：使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。重置功能按钮功能实现详细步骤:第一:首先给el-form添加ref属性。  &lt;el-form :inline="true" :model="queryParams" ref="queryForm"&gt;第二：在点击重置按钮执行的方法中，执行如下功能代码片段 reset(){        # 重新设置请求参数实体属性        this.queryParams = {         
写input组件的时候需求一个清空按钮，但是如果直接修改prop中父级的传值会报错。但是如果不修改父级无法更新值，也会带来开发的问题。
v-model 完成大部分数据双向绑定
<input type="text" :value="inputValue"
      @change="$emit('change',$event.target.value)"
      @blur="$emit('blur',$event.target.value)"
      @focus="$emit('focus',$event.target.value)"
      @input =
重置表单(把表单的所有输入元素重置为它们的默认值。):
1.使用reset按钮，条件reset按钮必须在form表单内部。
2. &lt;input id="Button1" type="button" value="button" onclick="form1.reset();" /&gt;可以不在表单内部。
用途示例：一般我们做添加页面和编辑页面时用的都是同一个页...
				
在新建和编辑表单的时候，经常需要重置表单。通用的方法是
this.$refs[formName].resetFields()；
但是经常会发现有的选框重置不好使，那是因为你的表单元素没有绑定prop
如果你要清空表单，应该注意几个方面
 <el-form
      ref="postForm"
      :model="postForm"
      :rules="rules"
				
1.在项目中我们经常会遇到el-form重置表单失效,那么我们可以采取另外一种方法
<el-form :model="formLine" ref="formLine">
          <el-row v-for="(item,index) in formLine.searchVOList" :key="index">
	          <el-col :span="18">
	              <el-form-item :label="
				
用了elementUI里的form表单，表单重置的几个关键点，我整理了一下，防止踩坑
1.表单刚开始的时候要绑定ref属性，不然在调用$refs时会找不到你传进来的表单名
2.el-form-item标签上绑定prop属性，prop属性的属性值就是对应表单里的参数名
<el-form ref="voucher" class="uploadVoucher" :model="voucher" label-width="120px">
    <el-form-item label="订
				
今天发现一个神奇的事情，查询之后，点击“重置按钮”，搜索框的输入项没有发生响应，后面才发现原来是因为我错误的认为reset 按钮单纯的将input等输入项中的值清空，但其实并非如此。
      w3c上是这样说的： 
      在 HTML 表单中  标签每出现一次，一个 Reset 对象就会被创建。当重置按钮被点击，包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML 
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>
在script中：
import axios from 'axios';
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          axios.post('/api/login', this.form).then(response => {
            if (response.data.code === 200) {
              // 登录成功，跳转到首页
              this.$router.push('/home');
            } else {
              this.$message.error('登录失败');
        } else {
          return false;
    resetForm() {
      this.$refs.form.resetFields();
在上述代码中，我们先引入了axios，使用axios发送POST请求到后台的/api/login接口，参数为表单中的form数据。如果接口返回的状态码为200，说明登录成功，此时可以跳转到首页。如果接口返回的状态码不为200，说明登录失败，此时可以给用户提示登录失败信息。
至此，vue和element-ui的form组件与axios的api接口就配合使用成功了。