codereview--前端需要注意的点(持续更新)

1.js 里判断相等,不是用俩等号而是用三个等号,因为==只判断值,===判断值和类型

2.取值类型的三目运算符在es6里面有个语法糖,比如{{indexNew||index}}
{{indexNew||index}}等同于{{ (indexNew==''||indexNew==null)?index:indexNew }}

3.很多对象内部,我们可以不进行初始化的就不要初始化了,比如

conditions: {//检索
    stateAbbr: '',
    calendarIndex: '',
    calendarDateStr: ''
  }
如上所示是绑定了三个检索条件,其实我们不绑定Vue也会自动创建
conditions:{} ,这样既可

4.有的时候我们会进行拼接变量,比如日期拼接 year+"-"+month+"-"+day
其实es6里面我们可以用下面语法糖代替,看起来更舒适.

`${year}-${month}-${dat}`   ====>代替 year+"-"+month+"-"+day

5.有的时候我们想要把一个对象所有数据都带到另一个对象或者参数里,或者说是合并对象.

常规做法下图左，es6语法糖图右，我们用三个英语点加上对象名即可将所有数据带上

6.js里我们进行判断if(index==null||index==''||index==undifine)可以等同于if(index),可以理解为如果index为空就返回false,不为空返回true

7.如果if(index)判断下的语句为空,那么我们可以不用写if(index){} else{},可以直接写if(!index),比如

if(this.myInfoForm.calendarIndexTemp==this.myInfoForm.calendarIndex){
 
}else{//如果更新了
  this.myInfoForm.calendarIndexNew=this.myInfoForm.calendarIndexTemp;
}

我们可以写成,优化代码结构.

f(this.myInfoForm.calendarIndexTemp!=this.myInfoForm.calendarIndex){
  this.myInfoForm.calendarIndexNew=this.myInfoForm.calendarIndexTemp;
}

8.在我们实例对象或者数组赋值时候有两种方式.比如下面我在进行行更新时候

方式一:如果想赋值的比较少
updateRow(row) {
     this.myInfoForm = row;
     delete this.myInfoForm.status.//对于少量不想用的数据可以删除
}
方式二:如果想赋值的比较多
updateRow(row) {
       this.$set(this.myInfoForm,"status",row.status);
}

原因
对象的话，只是不能检测到属性的新增或者删除
对于初始化过得，不属于新增属性，所以没问题

9.关于element ui列表显示会有一片空白的问题
这是因为 width全部都写死了，(注释:不要全部都写死width，没写width的会自动分配宽度) 如上所示,我们应该至少留一个width不分配宽度,使的表格宽度能与我们屏幕相适应