新增数据弹框+表单的基本套路

最新推荐文章于 2023-10-18 15:43:06 发布

麦兜的明天

最新推荐文章于 2023-10-18 15:43:06 发布

阅读量540

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ll123456789_/article/details/128509696

版权

今天写的这个页面，刚好遇到了一个完成新增数据的功能，中间遇到了一些小问题，特此写篇博客记录下来。

通常来说，点击新增添加数据都需要用到弹框+表单的页面结构，需要用到element组件，如下

这里根据弹框里面的表单的复杂程度，决定是否使用组件-----------

第一种不使用组件

                <!-- 新增弹框 -->
            <el-dialog
              :title="isEdit?'编辑':'添加'"
              :close-on-click-modal="false"  也就是禁止点弹框之外的地方关闭弹框
              :close-on-press-escape="false" 是否可通过按下 ESC 键关闭弹框
              :visible.sync="isShowDialog" 在data中添加isShowDialog: false  默认弹框隐藏
            >
              <!-- 表单输入新增数据  :rules="rules"表示规则：做表单校验-->
              <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">
                <el-form-item label="角色名称" prop="name" 绑定了rules规则 有prop才会校验>
                  <el-input v-model="roleForm.name" />
                </el-form-item>
                <el-form-item label="角色描述" >
                  <el-input v-model="roleForm.description" />
                </el-form-item>
              </el-form>
              <!-- 底部点击确认或取消-->
              <el-row slot="footer" type="flex" justify="center">
                <el-col :span="6">
                  <el-button size="small" @click="Close">取消</el-button>
                  <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
                </el-col>
              </el-row>
            </el-dialog>

在弹框中插入一个表单（在data中定义一个isShowDialog为false的默认值）功能思路如下：

1. 点击新增，isShowDialog为true弹框显示，

2.在api中根据接口写ajax请求，然后回到当前页面导入

3.在当前页面封装新增函数点击弹框底部的确认就调用新增函数，

发送新增请求之后重新渲染列表

提示成功弹框隐藏

问题：如果有分页的请况，添加数据之后，如何在当前页面看到新增的数据？

解决方法：需要跳转到最后一条数据所在的页码，最后一页的页码等于一共几条数据/每页显示几条数据得到的值向上取整

注意点：添加数据成功后此时总数据也增加了一条所以应该总数据++

只要是有分页功能增加数据这个问题都会存在所以一定要注意！！！

第二种弹框表单比较复杂的情况使用组件（通常存在比较复杂的表单校验）如下添加编辑共用弹框

首先需要在data中标识当前是添加还是编辑添加false 编辑true 如isEdit: false,

  父组件----------------------------------------------------------------------------------
   <!-- 添加 编辑弹框 -->
    <el-dialog
      v-if="showDialog"
      :title="isEdit?'编辑':'添加'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
    >
      <!-- 弹框内容组件 -->
      <deptDialog
        :id="curId"
        :is-edit="isEdit"
        :origin-list="originList"
        @success="hSuccess"
        @close="hClose"
      />

    </el-dialog>

子组件-----------------------------------------------------------------------------------
<template>
  <div>
    <el-form ref="deptForm" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
          <el-option v-for="item in employees" :key="item.id" :value="item.username" :label="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.native="hSubmit">确定</el-button>
        <el-button size="small" @click.native="hClose">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

功能思路如下：

1 父组件写点击出现弹框事件弹框<el-dialog >

2 另一个文件里面写子组件弹框的表单内容 <el-from>

3 父组件导入组件注册组件使用组件(将子组件插入父组件弹框<el-dialog> 中放子组件<el-dialog/>)

4 组件通讯

父传 :id="curId" 子收：props: { id: { type: String, required: true}, .....}

子传父通知父组件请求成功 this.$emit('success') 父收 @success="hSuccess"

5 表单校验：（后面的博客会写详细的表单校验）

在data中定义originList: [], // 父组件将表单校验需要用到的数据收集起来存在originList中传给子组件在子组件中完成校验

6 编辑或添加将id传给子组件

6.1 点击添加标识当前状态为添加状态，给子组件传id过去，让子组件里面点确认按钮时发添加请求子传父成功事件在父组件中提示添加成功重新渲染页面

6.2 点击编辑，给子组件传id 设置此时的状态是编辑状态，让子组件里面点确认按钮时发编辑请求子传父成功事件在父组件中提示编辑成功重新渲染页面