elementui表单重置失效,html表单重置按钮
本文主要介绍了元素使用埃尔格式时，点击重置按钮或者取消按钮时会实现表单重置效果，具有一定的参考价值，感兴趣的可以了解一下
目录
业务场景：效果演示：
业务场景：
使用埃尔格式时，点击重置按钮或者取消按钮时会实现表单重置效果。
重置功能按钮功能实现详细步骤：
第一：首先给埃尔格式添加裁判员属性。
El-form:inline= true :model= query params ref= query form
第二：在点击重置按钮执行的方法中，执行如下功能代码片段
重置(){
# 重新设置请求参数实体属性
this.queryParams={
成员名称：未定义，
typeId:未定义，
};
# 指定表单属性值重置
这个refs[form ].resetFields()；
}
效果演示：
默认展示页：
检索效果页：
重置效果页：
某视频剪辑软件页面源码：
风格
/风格
模板
差异
el-col :span=19
El-form:inline= true :model= query params ref= query form
El-表单-项目标签=姓名
El-input v-model=查询参数。membername placeholder=姓名/el-input
/El-表单-项目
埃尔-表单-项目
div style=text-align:right
！-自定义搜索处理程序函数-
El-button type= primary @ click= search handler 查询/el-button
！-
El-button type= primary @ click= reset 重置/el-button
/div
/El-表单-项目
/el格式
/el-col
p style= text-align:left；下边距：10px
El-button type= primary @ click= dialogFormAdd=true 添加/el-button
/p
el-row
埃尔表
:data=tableData
style=宽度：100%
埃尔-表格-列
表头中的v-for=(数据，索引
:key=index
:prop=data.prop
:label=data.label
：最小宽度=数据[最小宽度]
:align=data.align
/El-表格-列
埃尔-表格-列
prop=memberSex
标签=性别
模板slot-scope=“scope”{ scope。划。membersex===1？男 : 女} }/模板
/El-表格-列
埃尔-表格-列
prop=memberStatic
标签=会员状态
模板slot-scope=“scope”{ scope。划。成员静态===1？正常 : 不正常} }/模板
/El-表格-列
埃尔-表格-列
标签=操作
最小宽度=240
模板槽-范围="范围"
El-button type= primary size= mini @ click= toEdit(scope)修改/el-button
El-button type= danger size= mini @ click=删除成员(范围)删除/el-button
/模板
/El-表格-列
/el-table
英国铁路公司
埃尔分页
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:current-page=分页。页面索引
:page-size=[5，10，20，30，40]
:page-size=pagination.pageSize
布局=总计，大小，上一页，分页，下一页，跳转
:total=pagination.total
/El-分页
/el-row
el-dialog title=添加学生：visible.sync=dialogFormAdd
el-form :model=member
El-表单-项目标签=姓名
El-input v-model=成员。成员名自动完成=关/El-输入
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
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-表单-项目标签=姓名
El-input v-model=成员。成员名自动完成=关/El-输入
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
El-button @ click= dialogFormEdit=false 取消/el-button
El-button type= primary @ click= edit(student)确定/el-button
/div
/el-dialog
/div
/模板
脚本
导出默认值{
姓名：成员，
data () {
返回{
表数据：[],
dialogFormEdit: false，
dialogFormAdd:false，
成员：{
成员Id: ，
成员名称： ,
成员电话： ,
成员： ,
类型名称： ,
nenberDate: ，
memberStatic:" "，
成员平衡：""，
memberxufei:" "
},
查询参数：{
成员名称：,
typeId:" "
},
分页：{
pageIndex: 1，
页面大小：10,
总计：0,
},
表格标题：[
{
prop: memberId ，
标签: 会员编号，
对齐："左"
},
{
道具："成员名",
标签: 名称，
对齐："左"
},
{
道具："成员电话",
标签: 电话，
对齐："左"
},
{
prop: memberAge ，
标签: 年龄，
对齐："左"
},
{
prop: membertypes.typeName ，
标签: 卡类型，
对齐："左"
},
{
道具： nenberDate ，
标签: 录入日期，
对齐："左"
},
{
prop: memberbalance ，
标签: 会员余额，
对齐："左"
},
{
道具： memberxufei ，
标签: 到期日期，
对齐："左"
}
]
}
},
方法：{
init () {
var self=this
这个. axios({
方法： post ，
网址："/成员/查询",
数据：{ 页码:这个。分页。pageindex， pageSize :这个。分页。pageSize，“ktype”:0，
标题：{
内容类型":"应用程序/JSON；charset=utf-8 //改这里就好了
}
}).然后(res={
控制台。日志(分辨率)；
自我。分页。总计=研究数据。总计；
自我。表数据=研究数据。行；
})。接住(函数（错误){
console.log(错误)
})
},
handleSizeChange(val) {
这个。分页。pagesize=val
这个。分页。页面索引=1；
这个。init()；
},
handleCurrentChange(val) {
这个。分页。页面索引=val
这个。init()；
},
添加（学生){
这个. axios({
方法： post ，
URL:"/学生/插入"，
数据：{name: student.name， sex:student.sex， age:student.age， college:student.college， className:student.className}，
标题：{
内容类型":"应用程序/JSON；charset=utf-8 //改这里就好了
}
}).然后(res={
这个message.success(添加成功)
this.dialogFormAdd=false
this.init()
})。接住(函数（错误){
console.log(错误)
})
},
toEdit(范围){
this.student.sid=scope.row.sid
这个。学生。名称=范围。划。名字
this.student.sex=scope.row.sex
this.student.age=scope.row.age
this.dialogFormEdit=true
},
编辑（学生){
var params={
sid :学生。希德，
姓名:学生姓名，
性：学生。性，
年龄：学生。年龄
}
这个. axios({
方法： post ，
网址："/学生/更新",
数据：参数，
标题：{
内容类型":"应用程序/JSON；charset=utf-8 //改这里就好了
}
}).然后(res={
这个message.success(修改成功)
this.dialogFormEdit=false
this.init()
}).接住(函数（错误){
console.log(错误)
})
},
删除成员（范围){
调试器；
如果(!scope.row.memberId) {
this.tableData.splice(范围$index，1)
}否则{
这个. $确认(确认是否删除, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型：警告，
中心：正确
})。然后(()={
console.log(scope.row.memberId)
这个100美元axios。get(/member/delete/范围。划。memberid).然后(res={
这个message.success(删除成功)
this.init()
})。接住(函数（错误){
console.log(错误)
})
})。catch(()={
这个消息({
类型："信息",
消息： 已取消删除
})
})
}
},
searchHandler() {
var self=this
这个. axios({
方法： post ，
网址："/成员/查询",
数据：{ 页码:这个。分页。pageindex， pageSize :这个。分页。pageSize，“ktype”:0，“hyname”:this。查询参数。membername }，
标题：{
内容类型":"应用程序/JSON；charset=utf-8 //改这里就好了
}
}).然后(res={
控制台。日志(分辨率)；
自我。分页。总计=研究数据。总计；
自我。表数据=研究数据。行；
})。接住(函数（错误){
console.log(错误)
})
},
重置(){
this.queryParams={
成员名称：未定义，
typeId:未定义，
};
这个refs[form ].resetFields()；
}
},
已安装：函数(){
this.init()
}
}
/脚本
到此这篇关于ElementUI实现埃尔格式表单重置功能按钮的文章就介绍到这了，更多相关元素埃尔-表单表单重置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。