入职第一个项目bug总结-2018/07/28

此项目是正式入职后的第一个项目，可能各类缘由重重，致使测试提出了如此多的bug，关于那些由于需求不清楚而致使的就不说了，bug总结以下：

1、ElementUI table组件出现横向滚动条

缘由：由于左右的横向border致使浏览器计算的宽度超出了咱们设定的宽度，从而致使出现横向滚动条

解决：

方法一：去掉border，可是会影响样式美观

方法二： .el-table__body-wrapper, .el-table__footer-wrapper, .el-table__header-wrapper { width: 101%; } 

 

2、文件单位转换byte字节转化我对应单位（四舍五入取整计算）

 

function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, // or 1000
        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toFixed(0) + '' + sizes[i]; }

 

 

3、ElementUI 组件若是没有提供自定义class，修改样式能够经过审查元素获取对应的默认类名来修改覆盖组件样式，可是这个样式要写到全局，放到vue的组件本身做用于样式不会有效，由于本身组件做用域的css选择器打包时会被增长属性，进而限制其为局部的

 

4、vue从新渲染的问题

组件中data的某个值orderList为一个数组或者一个对象，其内各项为一个个对象，而后咱们动态经过等号方式添加一个新对象  

this.dataList[prop] = { status: 0 }

 

 而后咱们觉得需求须要修改新添加对象的属性

this.orerList[prop].status = 1

 

可是咱们会发现修改后组件并无从新渲染

 

缘由：由于这个新添加的对象是经过等号添加的，这个新添加的对象并无参与过初始化，也就并无设置setter和getter拦截器，因此这个新添加的对象是非响应式，因此咱们改变该对象， 并不会触发从新渲染。

解决：经过Vue.$set(obj, prop, val)来添加，经过此方法添加的数据是响应式的

this.$set(this.dataList, prop, { status: 0 })

 

 

 

 

 

 

 

--------------