Element-ui 导航表单重置与弹出层表单重置

女爷i 2023-10-10 12:32 161阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue + element-ui表单重置 resetFields问题（无法重置表单）

问题： elementui在重置表单时，无法使用`this.$refs['formRefVal'].resetFields()`清空表单数据; elementui ...

怼烎@/ 2024年04月18日 17:05/ 0 赞/ 215 阅读

相关 Element-ui 导航表单重置与弹出层表单重置

场景: 使用el-form时，点击顶部导航表单的重置按钮实现导航表单重置效果。功能实现：第一步:首先给el-form添加ref属性。 <el-for

女爷i/ 2023年10月10日 12:32/ 0 赞/ 162 阅读

相关 vue重置表单，resetFields无法重置数据

状况描述：今天做一个登录页面，需要模拟提前缓存用户之前的信息，然后如果用户需要更换用户信息，那么用户就要点击重置按钮，但是重置了以后数据无法清空！在网上找了相关案例，用于解决这

梦里梦外;/ 2023年09月26日 09:04/ 0 赞/ 200 阅读

相关 vue重置form表单

使用 this.$options.data() 方法 <el-button @click="rest" size="mini" class="btn">重置<

我不是女神ヾ/ 2022年09月15日 12:50/ 0 赞/ 421 阅读

相关 iView 表单重置

在Vue里面，想重置iView的表单，需要在FormItem中指定prop属性，FormItem包含的控件需要双向绑定表单Model对象，同时表单Model对象也要因应控件类型

ゝ一纸荒年。/ 2022年08月30日 11:45/ 0 赞/ 318 阅读

相关 Element 表单重置

Element 表单重置的时候发现，不能把表单绑定的数据重置为空，这是因为我们在给表单赋值的操作其实是在created 进行绑定的，而 Element 的表单重置是重置为mun

亦凉/ 2022年08月29日 10:24/ 0 赞/ 335 阅读

相关 elementui resetFields方法重置表单失败

<el-form :inline="true" :model="form" ref="form1" class="form-inline">

阳光穿透心脏的1/2处/ 2022年04月24日 15:32/ 0 赞/ 760 阅读

相关 vue+elementui 对话框取消表单验证重置

最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 v

Myth丶恋晨/ 2022年04月18日 01:21/ 0 赞/ 607 阅读

相关表单重置

由于JQuery中，提交表单是像下面这样的： $('yigeform').reset(); 但是，不幸的是，这样写的话，会有一个让你很郁闷的结果，那就是，表单无法重

向右看齐/ 2022年04月16日 02:10/ 0 赞/ 512 阅读

相关 iview表单重置以及重置验证信息

表单内容添加一般都是在弹出框中进行编辑、修改、新增的如以下这段编辑代码：  <Modal :mask-clo

你的名字/ 2021年09月20日 03:00/ 0 赞/ 671 阅读