超級簡單Vue實現手風琴佈局

說一下效果：
全部展開效果：

展開都的話四等分收起一個，其餘的三等分，收起兩個，其餘的等分，展開一個，佔據所有空間。

全部摺疊效果：

展開一個效果：

這一塊一塊的總共是組件複用了四次。所以單獨看一個列表就好了（已截止）
結構如下

<template>
  <div class="foldable-list" v-if="toggle">
  
  // 注意 header和底下的header
    <header>
     // 塊的title
     <p class="title">
        {{ $t('canlendar.' + list.name) }} ( {{ list.list.length }} )
      </p>
      <p class="toogle" @click="toggle = !toggle">
         {{ toggle ? '收起' : ‘展開’ }}
      </p>
    </header>

    // 塊的list
    <div class="list">
      <p class="title dark-bg">
      // list的titles
      </p>
      // list-mian爲數據展示部分，可滾動
      <ul class="list-main">
        <li
          v-for="(item, index) in list.list"
          :class="{ 'dark-bg': index % 2 === 1 }"
        >
          <template v-for="(val, inx) in list.title">
            <span>
              {{ item[val] }}
            </span>
          </template>
        </li>
      </ul>
    </div>
  </div>

// 注意header
  <div class="foldable" v-else>
    <header>
      <p class="title">
        {{ $t('canlendar.' + list.name) }} ( {{ list.list.length }} )
      </p>
      <p class="toogle" @click="toggle = !toggle">
        {{ toggle ? '收起' : ‘展開’ }}
      </p>
    </header>
  </div>
</template>

list爲上層傳遞的值，格式爲
list: {
name: ‘XXX’ // title
list: [{}, {}, …] // list數組
title: [‘XXX’, ‘XXX’, ‘XXX’…]要展示的列名
}
其實發現<template>裏面有一個v-if和v-else。展開的時候顯示v-if，摺疊的時候顯示v-else。
這是爲什麼？
.foldable-list flex爲1，按理只要裏面的 // 塊的list <div class="list" v-if=“toggle”>通過toggle展示與否就可以了，爲什麼不加v-if=“toggle”？要收起單獨寫一個頭部（雖然和展開的頭部一模一樣，爲什麼不復用？）

因爲

.foldable-list {
	flex: 1
}

當toggle爲true的時候，正常顯示，你以爲toggle爲false的時候

會乖乖的收起？不會的，只是底下的list無數據，在頁面中展示的位置依然在（1/4的位置）。
爲什麼？
因爲 .foldable-list爲父組件，他佔用的始終爲四分之一，只要他沒消失。就算他是個空殼，也是佔用1/4.

所以問題的突破口就是點擊收起的時候讓 .foldable-list消失，用另一個高度爲30px的代替，即出現了上面的代碼。

完整代碼：https://github.com/zhangsundf/vue-foldabelList/blob/master/FoldableList.vue