目錄

• 業務場景：
• 效果演示:

業務場景：

使用el-form時，點選重置按鈕或者取消按鈕時會實現表單重置效果。

重置功能按鈕功能實現詳細步驟:

第一:首先給el-form新增ref屬性。

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

第二：在點選重置按鈕執行的方法中，執行如下功能程式碼片段

 reset(){
        # 重新設定請求引數實體屬性
        this.queryParams = {
          memberName: undefined,typeId: undefined,};
        # 指定表單屬性值重置
        this.$refs["form" ].resetFields();
      }

效果演示:

預設展示頁:

檢索效果頁:

重置效果頁:

頁面原始碼:

<style>
</style>
<template>
  <div>
    <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>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
   CPOFOIq
 
 <p style="text-align: left;http://www.cppcns.com margin-bottom: 10px;">
      <el-button type="primary" @click="dialogFormAdd = true">新增</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="性別">
          <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>
      <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="新增學生" :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>
      </div>
    </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>
      </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: '會員編號',align: 'left'
          },{
            prop: 'memberName',label: '名稱',{
            prop: 'memberPhone',label: '電話',{
            prop: 'memberAge',label: '年齡',{
            prop: 'membertypes.typeName',label: '卡型別',{
            prop: 'nenberDate',label: '錄入日期',{
            prop: 'memberbalance',label: '會員餘額',{
            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/on;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()
        })
         http://www.cppcns.com .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',"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)
         CPOFOIq })
      },reset(){
        this.queryParams = {
          memberName: undefined,};
        this.$refs["form" ].resetFields();
      }
    },mounted: function () {
      this.init()
    }
  }
</script>

到此這篇關於ElementUI實現el-form表單重置功能按鈕的文章就介紹到這了,更多相關Element el-form表單重置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！