ElementUI實現(xiàn)el-form表單重置功能按鈕
更新時間：2021年07月19日 15:36:10 作者：在奮斗的大道
本文主要介紹了Element使用el-form時，點擊重置按鈕或者取消按鈕時會實現(xiàn)表單重置效果，具有一定的參考價值，感興趣的可以了解一下
業(yè)務場景：
使用el-form時，點擊重置按鈕或者取消按鈕時會實現(xiàn)表單重置效果。
重置功能按鈕功能實現(xiàn)詳細步驟:
第一:首先給el-form添加ref屬性。
<el-form :inline="true" :model="queryParams" ref="queryForm">
第二：在點擊重置按鈕執(zhí)行的方法中，執(zhí)行如下功能代碼片段
reset(){
# 重新設置請求參數(shù)實體屬性
this.queryParams = {
memberName: undefined,
typeId: undefined,
};
# 指定表單屬性值重置
this.$refs["form" ].resetFields();
}
效果演示:
默認展示頁:
檢索效果頁:
重置效果頁:
Vue頁面源碼:
<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函數(shù)-->
<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="會員狀態(tài)">
<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>
到此這篇關(guān)于ElementUI實現(xiàn)el-form表單重置功能按鈕的文章就介紹到這了,更多相關(guān)Element el-form表單重置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題
這篇文章主要介紹了解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue中的vue-print-nb如何實現(xiàn)頁面打印
這篇文章主要介紹了vue中的vue-print-nb如何實現(xiàn)頁面打印，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中的v-for循環(huán)key屬性注意事項小結(jié)
這篇文章主要介紹了Vue中的v-for循環(huán)key屬性注意事項小結(jié),非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了element 動態(tài)合并表格的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue2+elementUI的el-tree的選中、高亮、定位功能的實現(xiàn)
這篇文章主要介紹了vue2+elementUI的el-tree的選中、高亮、定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
Vuex結(jié)合storage實現(xiàn)用戶信息本地存儲方式
這篇文章主要介紹了Vuex結(jié)合storage實現(xiàn)用戶信息本地存儲方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 數(shù)據(jù)遍歷篩選 過濾 排序的應用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過濾 排序的應用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue實現(xiàn)剪貼板復制功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
vue 項目@change多個參數(shù)傳值多個事件的操作
這篇文章主要介紹了vue 項目@change多個參數(shù)傳值多個事件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要為大家詳細介紹了vue項目中canvas實現(xiàn)截圖功能，截取圖片的一部分，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07