ElementUI怎么实现el |
您所在的位置:网站首页 › el-form属性 › ElementUI怎么实现el |
ElementUI怎么实现el-form表单重置功能按钮
发布时间:2021-07-20 08:31:23
来源:亿速云
阅读:1135
作者:chen
栏目:开发技术
这篇文章主要介绍“ElementUI怎么实现el-form表单重置功能按钮”,在日常操作中,相信很多人在ElementUI怎么实现el-form表单重置功能按钮问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ElementUI怎么实现el-form表单重置功能按钮”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! 目录业务场景: 效果演示: 业务场景:使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果。 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性。 第二:在点击重置按钮执行的方法中,执行如下功能代码片段 reset(){ # 重新设置请求参数实体属性 this.queryParams = { memberName: undefined, typeId: undefined, }; # 指定表单属性值重置 this.$refs["form" ].resetFields(); }效果演示:默认展示页: 检索效果页: 重置效果页: Vue页面源码: 查询 重置 添加 {{ scope.row.memberSex === 1 ? '男' : '女' }} {{ scope.row.memberStatic === 1 ? '正常' : '不正常' }} 修改 删除 取 消 确 定 取 消 确 定 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() } }到此,关于“ElementUI怎么实现el-form表单重置功能按钮”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章! 推荐阅读: jsp中表单重置 jquery 重置表单免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 elementui el-form 上一篇新闻:ADO.NET连接池的原理及其使用方法 下一篇新闻:javascript中的对象一般是由什么组成的 猜你喜欢 linux如何启动docker服务 PHP中ProtoBuf的使用方法 keras实现tensorflow与theano相互转换的方法 如何用Android实现加载效果 PHP中堆排序的原理和应用 Android制作水平圆点加载进度条 Keras怎么实现Theano和TensorFlow切换 Python中select和selectors的用法 Unity制作俄罗斯方块游戏 怎么将tensorflow 2.0的模型转成 tf1.x 版本的pb模型 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |