Vue 小结

表单验证三要素

• el-form  需要有model属性； 要有rule属性用于校验规则； ref属性
• el-form-item 需要有prop属性
• el-input 需要有v-model绑定

拷贝加工处理数据

在表单中, 直接处理级联选择器中的数据, 如果发送请求时,遇到服务器崩溃, 会导致级联选择器出现问题

//  错误写法
this.formData.departName = this.formData.departName[this.formData.departName.length - 1]

可以采用拷贝的方法来解决

const data = JSON.parse(JSON.stringify(this.formData))
data.departName = data.departName[data.departName.length - 1]

控制弹层的显示与隐藏

第一种:

可以通过一个变量来控制一个弹层的显示与隐藏, 然后在子组件的 props 里接收这个变量, 默认将变量设置为 true , 等操作完成后, 使用 $emit 将变量为 false 传给父组件来控制弹层的关闭

第二种:

在子组件中的 data 中设置一个变量 isShow , 给取消按钮绑定 @click="isShow= false" 关闭弹层 

给父组件中引入的子组件设置 ref="addForm" , 再给点击显示弹层的按钮设置 @click="$r