element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
类别:编程学习 浏览量:1763
时间:2021-10-02 01:08:11 element-ui如何关闭表单验证
ElementUI实现el-form表单重置功能按钮目录
- 业务场景:
- 效果演示:
使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果。
重置功能按钮功能实现详细步骤:
第一:首先给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> <li> <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 > <li style="text-align:right"> <!--自定义searchHandler函数--> <el-button type="primary" @click="searchHandler">查询</el-button> <!----> <el-button type="primary" @click="reset">重置</el-button> </li> </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> <li slot="footer" class="dialog-footer"> <el-button @click="dialogFormAdd = false">取 消</el-button> <el-button type="primary" @click="add(student)">确 定</el-button> </li> </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> <li slot="footer" class="dialog-footer"> <el-button @click="dialogFormEdit = false">取 消</el-button> <el-button type="primary" @click="edit(student)">确 定</el-button> </li> </el-dialog> </li> </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>
到此这篇关于ElementUI实现el-form表单重置功能按钮的文章就介绍到这了,更多相关Element el-form表单重置内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- elementui下拉框联动(Element树形控件整合带图标的下拉菜单tree+dropdown+input)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- elementui的el-popover修改样式不生效的解决(elementui的el-popover修改样式不生效的解决)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
- 省 市书法家协会 送万福进万家 活动走进禹州美丽乡村(省市书法家协会)
- 点赞 禹州苌庄正式撤乡建镇 未来发展不可估量(禹州苌庄正式撤乡建镇)
- 它荣获 中国生态魅力镇 称号 就在咱们禹州,一起来看看(中国生态魅力镇)
热门推荐
- springboot+vue项目演示(springboot+VUE实现登录注册)
- sql中row的用法(sql server数据库中raiserror函数用法的详细介绍)
- laravel 前后端开发(在Laravel中实现使用AJAX动态刷新部分页面)
- python和java的共同语法(Python和Java的语法对比分析语法简洁上python的确完美胜出)
- mysql账户访问权限(MySQL 权限控制详解)
- 云服务器好在哪你知道吗(美国云服务器怎么选择?美国云服务器选择技巧分享)
- PC上的URL复制到手机浏览器打开
- phpstorm代码模板(phpStorm+XDebug+chrome 配置详解)
- html5新增特性(总结html5自定义属性有哪些)
- dockermysql实例(docker 连接宿主Mysql操作)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9