入職第一個項目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 
})

 

 

 

 

 

 

 

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