Element-ui 导航表单重置与弹出层表单重置
熊孩纸
阅读:725
2021-03-31 12:26:17
评论:0
场景:
使用el-form时,点击顶部导航表单的重置按钮实现导航表单重置效果。
功能实现:
第一步:首先给el-form添加ref属性。
<el-form :inline="true" ref="queryForm" class="demo-form-inline">
第二步:在重置按钮绑定监听事件,实现表单重置。
<!--顶部菜单栏-->
<el-form :inline="true" ref="queryForm" class="demo-form-inline">
<el-form-item>
<el-input
v-model="search"
class="search_name"
size="large"
placeholder="输入角色名称查询">
</el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="onSearch()"
class="el-icon-search">查询
</el-button>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="onRest()"
class="el-icon-delete">重置
</el-button>
</el-form-item>
<el-form-item>
<el-button
class="el-icon-refresh"
type="primary"
@click="toAdd()">添加
</el-button>
</el-form-item>
</el-form>
在methods 之onRest() 源码
// 点击重置
onRest(){
// 清空请求参数model
this.$refs["queryForm" ].resetFields();
// 重新调用init 方法
this.init()
},
场景:
点击新增按钮,弹出表单需要重置model
功能实现:
第一步:点击新增按钮时,设置创建标识(dialogFormAdd=true),同时清空model 相关提交属性值
// 点击添加
toAdd(){
this.dialogFormAdd = true
// 请求参数model 清空
this.role.name = ''
this.role.desc = ''
},
第二步:点击提交按钮时,设置创建标识(dialogFormAdd=false),同时将model 相关提交后台服务接口进行创建
// 新增角色
add(){
this.$axios({
method:'post',
url:'/api/role/insert',
data:{'name': this.role.name, 'desc':this.role.desc},
headers:{
'Content-Type':'application/json;charset=utf-8' //改这里就好了
}
}).then(res => {
this.$message.success('添加成功')
this.dialogFormAdd = false
this.init()
})
.catch(function (error) {
console.log(error)
})
},
角色管理源代码:
<style>
</style>
<template>
<div id="role-manager">
<!--顶部菜单栏-->
<el-form :inline="true" ref="queryForm" class="demo-form-inline">
<el-form-item>
<el-input
v-model="search"
class="search_name"
size="large"
placeholder="输入角色名称查询">
</el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="onSearch()"
class="el-icon-search">查询
</el-button>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="onRest()"
class="el-icon-delete">重置
</el-button>
</el-form-item>
<el-form-item>
<el-button
class="el-icon-refresh"
type="primary"
@click="toAdd()">添加
</el-button>
</el-form-item>
</el-form>
<el-row>
<el-table :data="tableData" style="width: 100%;">
<el-table-column prop="name" label="角色名称" >
</el-table-column>
<el-table-column prop="desc" label="角色描述" >
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="toEdit(scope)">编辑</el-button>
<el-button type="danger" size="mini" @click="deleteRole(scope)">删除</el-button>
<el-button type="primary" size="mini" @click="toAuthorize(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, prev, pager, next"
:total=pagination.total>
</el-pagination>
</el-row>
<el-dialog title="添加角色" :visible.sync="dialogFormAdd">
<el-form :model="role" label-width="100px">
<el-form-item label="角色名称" >
<el-input v-model="role.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="角色描述" >
<el-input v-model="role.desc" 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(role)">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="修改角色" :visible.sync="dialogFormEdit">
<el-form :model="role">
<el-form-item label="角色名称" >
<el-input v-model="role.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="角色描述" >
<el-input v-model="role.desc" 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()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default{
name: 'role-manager',
data () {
return {
tableData: [],
dialogFormEdit: false,
dialogFormAdd:false,
role: {
id: '',
name: '',
desc: ''
},
pagination: {
pageIndex: 1,
pageSize: 10,
total: 0,
},
search:''
}
},
methods:{
init () {
var self = this
this.$axios({
method:'post',
url:'/api/role/getPage',
data:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize},
headers:{
'Content-Type':'application/json;charset=utf-8' //改这里就好了
}
}).then(res => {
console.log(res);
self.pagination.total = res.data.datas.data.total;
self.tableData = res.data.datas.data.records;
})
.catch(function (error) {
console.log(error)
})
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pagination.pageSize = val;
this.pagination.pageIndex = 1;
this.init();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pagination.pageIndex = val;
this.init();
},
// 点击检索
onSearch() {
var self = this
this.$axios({
method:'post',
url:'/api/role/getPage',
data:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize,"name":this.search},
headers:{
'Content-Type':'application/json;charset=utf-8' //改这里就好了
}
}).then(res => {
console.log(res);
console.log(res.data.datas.data.total);
console.log(res.data.datas.data.records);
self.pagination.total = res.data.datas.data.total;
self.tableData = res.data.datas.data.records;
})
.catch(function (error) {
console.log(error)
})
},
// 点击重置
onRest(){
// 清空请求参数model
this.$refs["queryForm" ].resetFields();
// 重新调用init 方法
this.init()
},
// 新增角色
add(){
this.$axios({
method:'post',
url:'/api/role/insert',
data:{'name': this.role.name, 'desc':this.role.desc},
headers:{
'Content-Type':'application/json;charset=utf-8' //改这里就好了
}
}).then(res => {
this.$message.success('添加成功')
this.dialogFormAdd = false
this.init()
})
.catch(function (error) {
console.log(error)
})
},
// 点击添加
toAdd(){
this.dialogFormAdd = true
// 请求参数model 清空
this.role.name = ''
this.role.desc = ''
},
// 角色删除
deleteRole(scope){
console.log(scope.row)
if (!scope.row.id) {
this.tableData.splice(scope.$index, 1)
} else {
this.$confirm('确认是否删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
console.log(scope.row.id)
this.$axios({
method:'post',
url:'/api/role/delete',
data:{'id': scope.row.id},
headers:{
'Content-Type':'application/json;charset=utf-8' //改这里就好了
}}).then(res => {
this.$message.success('删除成功')
this.init()
}).catch(function (error) {
console.log(error)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})}
},
// 编辑角色(model 赋值)
toEdit (scope) {
console.log(scope.row)
this.role.id = scope.row.id
this.role.name = scope.row.name
this.role.desc = scope.row.desc
this.dialogFormEdit = true
},
// 编辑管理员
edit(){
this.$axios({
method:'post',
url:'/api/role/update',
data:{'name': this.role.name, 'desc':this.role.desc, 'id':this.role.id},
headers:{
'Content-Type':'application/json;charset=utf-8' //改这里就好了
}
}).then(res => {
this.$message.success('更新成功')
this.dialogFormEdit = false
this.init()
})
.catch(function (error) {
console.log(error)
})
}
},
mounted: function () {
this.init()
}
}
</script>
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。