c/c++语言开发共享ElementUI实现el-form表单重置功能按钮

目录

  <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>      <p style="text-align: left; 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: '名称',              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>