今天写的这个页面,刚好遇到了一个完成新增数据的功能,中间遇到了一些小问题,特此写篇博客记录下来。
通常来说,点击新增添加数据都需要用到弹框+表单的页面结构,需要用到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 设置此时的状态是编辑状态,让子组件里面点确认按钮时发编辑请求 子传父成功事件 在父组件中 提示编辑成功 重新渲染页面
7 封装关闭弹框,表单重置事件,在点击x 取消 确认的时候 都需要调用这个函数
明天附上页面代码