关于使用elementui的相关问题记录

25次阅读

共计 985 个字符，预计需要花费 3 分钟才能阅读完成。

设置表单验证

官方提供的是给一个 form 对象下属性添加 prop 去验证，有的场景是弹窗内是一个数组，则需要以下方法处理：
（1）

 以上，如果一个对象里面包含的是数组，需要 v -for 遍历，el-form 行中:model='item', 提交时触发 submit 方法

submit（）{

  let isCanSubmit = true;
  for(let i = 0; i < this.$refs.personCommonContact.length; i++){this.$refs.personCommonContact[i].validate((valid) => {if (!valid) {return isCanSubmit = false; // 遍历时验证有问题将 isCanSubmit 改为 false}
    })
  }
  if(isCanSubmit){验证没问题继续写业务}

}
（2）

第 2 种方法是直接在 el-form 里面去遍历，el-form-item 的写法 :prop=”works[${index}].startDate“
调用 submit 方法：
submit(){

 this.$refs.personWorks.validate((valid) => {if(valid){验证没问题继续写业务}else{弹出提示内容}
 })

}

清除验证问题。
除了官方提供的方法以外，有的场景是清除的方法不是在 form 表单内点击按钮触发，可能是弹窗初始化的时候要清除内容或者验证
this.$refs.form && this.$refs.form.resetFields() 清除内容和验证
this.$refs.form && this.$refs.form.clearValidate() 清除表单验证
el-select 下拉框不能重新选择的问题
可能是因为下拉框的 key 层次嵌套太深，数据更改后没有触发 vue 的 render
可使用 this.$forceUpdate()强制更新
在 vue + element 项目中使用绑定对象时，如时间组件选中后无法显示，则应该：
this.$set(obj,’key’,value 值或者 null)
增加多个属性：this.obj = Object.assign({},this.obj,{
```
key1: 1,
key2：2
```
})
（切记：el-picker 组件只接收字符串类型）
对象增加属性时，不能直接赋值，如 this.obj.key = ‘xxx’

持续更新中。。。