日常开发增删改查-增加

这个是基于Element-ui 组件库实现的增加功能的一些简单常规操作

先看一下代码~~

点击添加部门 弹出一个新增的弹窗(因为部门很多,所以我们需要根据id来确定我们所点击的是给哪一个部门添加) 将我们所点击的id保存起来

 新增弹窗

这个新增弹窗是子组件,所以点击取消按钮或者右上角的X来关闭弹窗的时候需要去父组件来关闭弹窗

1.点击取消按钮

2.通过子传父来操作关闭弹窗

 3.在父组件接受,关闭弹窗

 点击确定按钮,兜底校验,调用接口,接口需要的id在父组件中,所以通过父传子,传过来,添加成功之后通知我们的父组件来更新列表,关闭弹窗

 关闭弹窗的时候也将数据清除

注意:!!!!  第一次关闭窗口清除了数据,但是再次打开新增窗口的时候就会出现以下情况,数据虽然清空了,但是再次打开的时候就会出现表单校验

解决方法 : resetFields()

resetFields:对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

!!但是有一个小坑:这个方法执行的时候由于他要清理校验结果,如果我们表单通过双向绑定,绑定的数据是从父组件里传过来的,很有可能会直接修改父组件里的数据

额外校验:实现表单数据的重复性校验

基础思路

1. 子组件中获取到所有的原始节点数据（未经过处理，方便操作）

2. 把所有节点的code码组成新数组

3. 判断当前输入的code码是否能在数组中找到 （includes）

4. 如果能找到代表重复，提示错误信息

1.通过props传入未经任何处理的平铺数组数据

 

3. 添加自定义校验函数

 

 

总结一下:

 1.如果你想将新增功能拿出来封装成一个新的组件,比如关闭,更新,取消,一系列的功能,都要通过父组件来修改,这是规定     (父传子,子传父这种基础操作是必须会的)

2.点击确定新增按钮,兜底校验,调数据

3.传参数,由于参数的id,在父组件中,需要通过父传子穿过来使用

4.之后更新数据,刷新页面,清除数据