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

1. 设置表单验证

   官方提供的是给一个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{
            弹出提示内容
        }
    })

   }

2. 清除验证问题。
   除了官方提供的方法以外，有的场景是清除的方法不是在form表单内点击按钮触发，可能是弹窗初始化的时候要清除内容或者验证
   this.$refs.form && this.$refs.form.resetFields() 清除内容和验证
   this.$refs.form && this.$refs.form.clearValidate() 清除表单验证
3. el-select下拉框不能重新选择的问题
   可能是因为下拉框的key层次嵌套太深，数据更改后没有触发vue的render
   可使用this.$forceUpdate()强制更新

4. 在vue + element项目中使用绑定对象时，如时间组件选中后无法显示，则应该：
   this.$set(obj,'key',value值或者null)
   增加多个属性：this.obj = Object.assign({},this.obj,{

   key1: 1,
   key2：2

   })
   （切记：el-picker组件只接收字符串类型）
   对象增加属性时，不能直接赋值，如this.obj.key = 'xxx'

5.数组去重方法

第一种方法：
deteleObject(obj) { //数组去重对象方法
  var uniques = [];
  var stringify = {};
  for (var i = 0; i < obj.length; i++) {
      var keys = Object.keys(obj[i]);
      keys.sort(function(a, b) {
          return (Number(a) - Number(b));
      });
      var str = '';
      for (var j = 0; j < keys.length; j++) {
          str += JSON.stringify(keys[j]);
          str += JSON.stringify(obj[i][keys[j]]);
      }
      if (!stringify.hasOwnProperty(str)) {
          uniques.push(obj[i]);
          stringify[str] = true;
      }
  }
  uniques = uniques;
  return uniques;
}
第二种方法：
let arr = Array.from(new Set(oldarr))

6、 列表问题：
（1）element-ui 中使用table列表，设置了固定栏时，列表行是动态v-if条件渲染的时候，固定栏布局会错乱，解决方法：
给table标签设置ref，可监听table中列数据变化时，给ref设置doLayout方法从新渲染列表高度
（2） 列表加了固定栏后 底部横向滚动条无法点击问题，方法：
在请求完列表数据以后执行 this.$nextTick(() => {

      this.$refs.Table.doLayout()
    })  即可重新渲染列表高度，滚动问题就解决了

7.在el-form中药验证上传文件是否有值时，可在el-upload的change事件中，赋值后手动执行this.$refs.form.clearValidate('uploadFile') -> ‘uploadFile’是el-upload的prop字段， 在执行删除onRemove事件回调中执行this.$refs.uploadFile.validate() -> 'uploadFile'是el-upload的el-from-item中的ref字段。（uploadFile字段需在对象中初始化存在）

  
  
  **持续更新中。。。**