element折疊面闆使用及優化

折疊面闆Collapse

存在的問題：

1、沒提供折疊面闆圖示的修改

2、沒提供折疊面闆圖示位置的修改

3、折疊面闆的高度沒法修改

是以，下面提供一些使用建議和解決方法

折疊面闆的組成：

布局采用了伸縮盒，大緻分為以上4個部分

1、如果你想實作一個多層展開，則需要Collapse嵌套，而表示折疊面闆展開關閉的屬性為name，由activeNames維護。我們v-for綁定的時候，通常會用index作為name，這樣問題就來了。一層Collapse的不受影響，但是多層Collapse嵌套時就會出現同步問題，什麼意思，就是内層展開與關閉會同時進行，該問題的解決方法就是name屬性綁定的問題，要綁定唯一辨別，不可圖省事用index作為name。

2、折疊面闆圖示位置的修改

比如将圖示放在最前面

/* 修改折疊面闆圖示位置 */
.collapse-title {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  flex: 1 0 90%;
  order: 1;
  }
 .el-collapse-item__header {
    flex: 1 0 auto;
    order: -1;
  }
           

3、折疊面闆圖示的修改

圖示的切換屬于旋轉90°而成的，是以在圖示的選取上有點必要，内容就是content表示的圖示

/* 穿透樣式,修改折疊面闆圖示*/
.deepStyle  >>> .el-collapse-item__header .el-icon-arrow-right:before {
  content: '\e791';
}
           

這裡涉及到穿透樣式，為什麼要使用穿透樣式呢？折疊面闆是一個封裝元件，看折疊面闆的組成，tab裡面包含head和arrow，這些class名并未向外界暴露出來，是以直接.el-icon-arrow-right是擷取不到的。穿透樣式的使用方法也很簡單，随架構的改變而在寫法上有改變，>>>或者/deep/。使用方法是，先找一個有具體名稱的class，然後以它作為入口選擇要修改的元素的class名，如下：

/* 穿透樣式,修改折疊面闆圖示*/
.deepStyle  >>> .el-collapse-item__header .el-icon-arrow-right:before {
  content: '\e791';
}
           

4、高度的修改同上

5、因業務需求，折疊面闆可能會有點選預設選中等需求，這裡講解一個點選選中的方法。

<div class="finallyItem" :class="{active: active === item.Id}" @click="clickIt（item）"></div>
           

點選的元素設定一個動态calss，是否有active屬性取決于該元素的id和目前的active是否相等，是以我們在點選事件裡，将active設定成目前item的id不就行了嘛

clickIt (i) {
      // 點選左邊框變色且加粗
      this.active = i.Id
    },
           

6、點選折疊面闆的展開事件叫change，目前展開的元素的name會被push到點選時生成的val中，是以要實作預設展開就直接把唯一辨別放在v-model的數組中即可，是以對點選折疊面闆後某一項的操作可以哦從此下手。如果有點選時預設選中第一個這種需求，則需要截取val數組的最後一項，因為展開會将該元素的name屬性值push到activeNames中。合住則會移除，最後一項是辨別目前點選項的。關鍵問題是，展開關閉都會觸發change事件，是以截取操作就會一直存在，舉個例子，展開了[0,1,2,3]這幾項，合住的時候最後一項消失，則會截取name為2的這一項，結合上面預設選中，目前選中就成了name為2的這一項，也就是說點了第四個，選中了第四個，然後合住的時候，選中了第3個。

如何解決呢，就是在data中申明另外一個數組copyArr，也用來存放目前的activeNames，點選事件中，在事件最後，将copyArr指派為val，也就是點選時生成的數組指派給它，這樣就可對比val和copyArr的長度來判斷change事件是展開還是關閉了，展開才要預設選中，合住保持現狀即可。以下展示部分代碼

handleChange (val) {
      // json轉換原因為去掉vue的_observer_的影響，val為數組，存放目前點選過的下标
      let resultVal = JSON.parse(JSON.stringify(val))
      /* 關閉時會重新截取數組末尾值，導緻active變化，resultVal和copyResultVal長度對比可區分打開還是關閉
      ** 因打開和關閉都會觸發handleChange事件，是以限制打開時才執行
      ** 原理：每次點選都會push目前name到數組裡，方法末尾将此數組儲存到copy數組裡，是以點選時生成的數組和copy數組一定不一緻
      */
      if (resultVal.length >= this.copyResultVal.length) {
        if (resultVal.length > 0) {
          let defaultIndex = JSON.parse(JSON.stringify(val)).pop()
          ...// 這裡執行其他代碼
          this.copyResultVal = _.cloneDeep(resultVal)
          }
        }
           

7、其他問題評論解答…