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.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号