前言

最近突然想總結(jié)一下開發(fā)中所遇到的問題和一些小方法，會(huì)一直更新直到不在做開發(fā)！

(附：一個(gè)vue3的學(xué)習(xí)社區(qū)非常不錯(cuò)??！)

1.數(shù)組判斷長度和元素相等

  isContained =(a, b)=>{
    if(!(a instanceof Array) || !(b instanceof Array)) return false;
    if(a.length != b.length) return false;
    for(var i = 0, len = b.length; i < len; i++){
       if(a.indexOf(b[i]) == -1 || b.indexOf(a[i]) == -1) {
         return false;
       }
     }
     return true;
    }
    arr1 = [1,2,3,4,'obj'];
    arr2 = [4,3,2,1,'obj'];
    alert(isContained(arr1,arr2));

2.elementUI 使用心得

雙擊表格
<el-table @row-dblclick="dbSelected">
</el-table>
el-table的屬性show-header，默認(rèn)值是true，也就是默認(rèn)有表頭，即使我們沒有定義，也會(huì)默認(rèn)添加表頭。

(2). Tree 樹形控件默認(rèn)勾選指定的子節(jié)點(diǎn)

const nodesList = [ 1, 5, 7, 8, 9 ]  //后端返回的已勾選的項(xiàng) 通過字段判斷出id是選中的
this.$nextTick(() => {
    const nodes = []
    nodesList.forEach(item => {
        const node = this.$refs.tree.getNode(item); // 獲取所有的節(jié)點(diǎn)
        if (node.isLeaf) { //關(guān)鍵，過濾掉不是葉子節(jié)點(diǎn)的
            nodes.push(item)
        }
    })
    this.$refs.tree.setCheckedKeys(nodes,true) //通過 id 設(shè)置目前勾選的節(jié)點(diǎn)
})

(3). 隱藏table的滾動(dòng)條(注意：隱藏后橫向滾動(dòng)條也不會(huì)出現(xiàn) 所以以后除了打游戲都應(yīng)該變成Macbook的觸控板 這才是發(fā)展方向)

滾動(dòng)隱藏
/deep/.el-table {
  .el-table__body-wrapper{
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .el-table__body-wrapper::-webkit-scrollbar{
    width: 0;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    width: 0;
  }
}

(4). InputNumber 計(jì)數(shù)器的問題

問題描述：
1：在父組件把數(shù)據(jù)傳入到子組件：
2：子組件中使用 el-input-number
3：傳入的內(nèi)容為數(shù)量 1 或者其它，
數(shù)據(jù)可以從父組件傳入到子組件，
但是el-input-number 里面不管是按 + 還是 -
只能變成 0 或者2，
無法在進(jìn)行增加了。

<el-input-number v-model="scope.row.num" :precision="0" :min="1" label="" @change="changeVal($event)">

changeVal() {
    this.$forceUpdate();// 解決辦法
}

(5). el-table 組件 表頭右側(cè)多出一部分

image.png

/* 隱藏 不兼容iE */
th.gutter {
  display: initial;
}
 
/* 移動(dòng)  兼容IE*/
th.gutter {
  background-color: #f1f1f1;
  position: absolute;
  height: 100%;
  right: 0;
}
/* vue 使用 scoped 需要 /deep/ 深度作用 */
div /deep/ th.gutter {
  display: initial;
}

(6). 遇到耗時(shí)操作使用loading的時(shí)候 不會(huì)有效果

     // 使用setimeout 將耗時(shí)操作放到setimeout里 
     // 將loading關(guān)閉的方法也放入setimeout里
    setTimeout(() => {

    }, 100);

(7). el-table底部空白，el-table__body-wrapper is-scrolling-left元素高度計(jì)算錯(cuò)誤

     // 設(shè)置表格body的高度
    .el-table__body-wrapper {
      // 減去的是表格header的高度
      height: calc(100% - 40px) !important;
    }

(8). 多個(gè)dialog展示的時(shí)候會(huì)出現(xiàn)遮罩層一直存在問題

     // 設(shè)置表格body的高度
    .el-table__body-wrapper {
      // 減去的是表格header的高度
      height: calc(100% - 40px) !important;
    }

3.對(duì)象數(shù)組篩選 并 合并 指定字段完全相同進(jìn)行項(xiàng)合并

mergerData(arr) {
      let result = new Map()
      if (arr.length > 1) {
        return arr.reduce((list, item)=>{
          let key = item.fulfillType + item.currencyCode; // 這里是你需要多少相同字段拼接成字符串 作為標(biāo)識(shí)
          if(result.has(key)){
            // 如果字段相同 進(jìn)行需要合并字段合并或者相加 邏輯處理
            result.get(key).amount = 
              new Decimal(result.get(key).amount).add(item.amount).toNumber()
            result.get(key).fulfillAmount =
              new Decimal(result.get(key).fulfillAmount).add(item.fulfillAmount).toNumber()
          }else{
            // 如果不相同則加入結(jié)果
            let data = {...item}
            list.push(data)
            result.set(key, data)
          }
          return list
        }, []);
      } else {
        return arr
      }
    },

4. 對(duì)比兩個(gè)數(shù)組 如果不同項(xiàng)進(jìn)行合并

var arr = [
        {id:'9999'},
        {id:'8888'},
        {id:'7777'},
        {id:'5555'},
        {id:'4444'},
    ]
    var brr = [
        {id:'8888'},
        {id:'7777'},
        {id:'2222'},
        {id:'3333'},
    ]
    let catArr = []
    for (let i= 0; i< arr.length; i++) {
        for (let j = 0; j < brr.length; j++) {
            if(arr[i].id == brr[j].id ){ 
                // 如需替換
                // arr[i] = brr[j]
                break
            }
            if( j === brr.length-1 ){
                catArr.push(arr[i] )
            }
        }
    }
    brr.concat(catArr)
    console.log(brr)

5.如何將大型項(xiàng)目從 Vue 2 遷移到 Vue 3

How to Migrate a large project from Vue 2 to Vue 3

6.display:-webkit-box；在IE瀏覽器中不兼容問題

一般做文字僅顯示兩行 會(huì)這樣做

span{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}

但是display:-webkit-box；在IE瀏覽器中不兼容

   // 解決方案：注意省略號(hào)不會(huì)存在 需要自己寫樣式
  加一句display: -ms-flexbox;代碼就可以兼容IE了（只能兼容到IE10），
       display: -webkit-box; （Chrome 4+, Safari 3.1, iOS Safari 3.2+）
       display: -moz-box; （Firefox 17-）
       display: -webkit-flex; （Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16）
       display: -moz-flex; （Firefox 18+ ）
       display: flex;（Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ 

7.vue中change事件的冒泡阻止

在Vue中，如果想阻止點(diǎn)擊事件冒泡，可以直接使用 .stop 修飾符即可

<div @click="divClick">
    <button @click.stop="btnClick">按鈕</button>
</div>

像上面這樣，點(diǎn)擊按鈕時(shí)就不會(huì)觸發(fā)到父元素的 divClick 事件。
當(dāng)我們?cè)囍o change 事件加上 .stop 修飾符時(shí)，發(fā)現(xiàn)并未起到阻止冒泡的作用，父元素 的 點(diǎn)擊 事件還是執(zhí)行了。
這個(gè)時(shí)候，我們可以通過使用原生事件 event.stopPropagation() 來解決這個(gè)問題。

stepperChange() {
  event.stopPropagation();  // 阻止事件冒泡
  console.log('change事件觸發(fā)');
}

像上面這樣在方法中加入一行代碼，就可以了。