ElementUI implements the el-form form reset function button

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

 reset(){
        # Reset the request parameter entity attributes this.queryParams = {
          memberName: undefined,
          typeId: undefined,
        };
        #Specify the form attribute value reset this.$refs["form" ].resetFields();
      }

<style>
</style>
<template>
  <div>
    <el-col :span="19">
      <el-form :inline="true" :model="queryParams" ref="queryForm">
        <el-form-item label="Name">
          <el-input v-model="queryParams.memberName" placeholder="Name"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align:right">
            <!--Custom searchHandler function-->
            <el-button type="primary" @click="searchHandler">Query</el-button>
            <!---->
            <el-button type="primary" @click="reset">Reset</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
    <p style="text-align: left; margin-bottom: 10px;">
      <el-button type="primary" @click="dialogFormAdd = true">Add</el-button>
    </p>
    <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="Gender">
          <template slot-scope="scope">{{ scope.row.memberSex === 1 ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column
          prop="memberStatic"
          label="Member Status">
          <template slot-scope="scope">{{ scope.row.memberStatic === 1 ? 'Normal' : 'Abnormal' }}</template>
        </el-table-column>
        <el-table-column
          label="operation"
          min-width="240">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="toEdit(scope)">Edit</el-button>
            <el-button type="danger" size="mini" @click="deleteMember(scope)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <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="Add student" :visible.sync="dialogFormAdd">
      <el-form :model="member">
        <el-form-item label="Name" >
          <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">Cancel</el-button>
        <el-button type="primary" @click="add(student)">OK</el-button>
      </div>
    </el-dialog>
 
    <el-dialog title="Modify students" :visible.sync="dialogFormEdit">
      <el-form :model="member">
        <el-form-item label="Name" >
          <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">Cancel</el-button>
        <el-button type="primary" @click="edit(student)">OK</el-button>
      </div>
    </el-dialog>
 
  </div>
</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: 'Membership number',
            align: 'left'
          },
          {
            prop: 'memberName',
            label: 'name',
            align: 'left'
          },
          {
            prop: 'memberPhone',
            label: 'Phone',
            align: 'left'
          },
          {
            prop: 'memberAge',
            label: 'age',
            align: 'left'
          },
          {
            prop: 'membertypes.typeName',
            label: 'Card type',
            align: 'left'
          },
          {
            prop: 'nenberDate',
            label: 'Entry date',
            align: 'left'
          },
          {
            prop: 'memberbalance',
            label: 'Member balance',
            align: 'left'
          },
          {
            prop: 'memberxufei',
            label: 'Expiration date',
            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' //Just change it here}
        }).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' //Just change it here}
        }).then(res => {
          this.$message.success('Added successfully')
          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' //Just change it here}
        }).then(res => {
          this.$message.success('Modification successful')
          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('Confirm whether to delete', 'Prompt', {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning',
            center: true
          })
            .then(() => {
              console.log(scope.row.memberId)
              this.$axios.get('/menber/delete/' + scope.row.memberId).then(res => {
                this.$message.success('Deleted successfully')
                this.init()
              })
                .catch(function (error) {
                  console.log(error)
                })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: 'Deleted'
              })
            })
        }
      },
      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' //Just change it here}
        }).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>