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

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

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

原因：因为左右的横向border导致浏览器计算的宽度超出了我们设定的宽度，从而导致出现横向滚动条

解决：

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

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

二、文件单位转换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];
}

三、ElementUI 组件如果没有提供自定义class，修改样式可以通过审查元素获取对应的默认类名来修改覆盖组件样式，但是这个样式要写到全局，放到vue的组件自己作用于样式不会有效，因为自己组件作用域的css选择器打包时会被增加属性，进而限制其为局部的

四、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 
})

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

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

猜你喜欢