手动实现折叠板(类似element中的表格扩展行/折叠板)

需求是默认只展示地址类型，在点击每条的右边三角时则再展开对应的地址来展示该条的详细数据，其实可以直接用element中的折叠板，只是这儿为了整体看着更搭配就自己实现了。
首先透过界面分析数据，展示的数据是一个数组，数组的每条对象就是一个折叠板，那么就要遍历，其次折叠板有两个状态组成，收缩和展开，在css上肯定是定位和2d过渡，切换两种状态在vue中可以方便的使用动态类名，还有一点，对于每条对象的三角，它应该是每条对象所私有的，是只能控制自己不能干涉其它折叠板，所以它不该是定义在数据模型里，而是应该在数据回来后，遍历数组为每条对象都动态( vue.$set() )定义其私有的标识符。
HTML:

<!-- strat of 移机地址审核的对话框 -->
    <el-dialog title="新机地址审核" 
      width = "72%" 
      :visible.sync="reviewDialogVisible" 
      :before-close="handleCloseReviewDialog" 
      :modal-append-to-body="false">
      <div class="config-block-box" :class="{shrink:item.isShrink}" v-for="(item,index) in formReviewList" :key="index" v-if="formReviewList.length > 0">
        <!--start of 每项标题栏-->
        <div class="block-title-bar">
            <span class="title">{{item.productType}}&nbsp;&nbsp;&nbsp;{{item.installType}}</span>
            <div class="title-action-box">
              <span class="extend-btn" @click="handleListSpread(item)"><svg-icon icon-class="shrink"></svg-icon></span>
            </div>
        </div>
        <!--end of 每项标题栏-->
        <!--start of 每项实体内容-->
        <div class="block-body-box">
          <el-row>
            <label class="review-ct-label">资源地址：</label>
            <span class="review-info-area">{{item.resourceC3 | formatStr}}</span>
            <span class="review-info-area">{{item.resourceC4 | formatStr}}</span>
            <span class="review-info-addr">{{item.resourceAddress | formatStr}}</span>
            <el-button type="primary"  plain icon="el-icon-location" @click="handleSelectResource(index)">选址</el-button>
            <el-button @click="handleClearResource(index)">还原</el-button>
          </el-row>
          <el-row>
            <label class="review-ct-label">光口数：</label>
            <span class="review-info-ctinfo">{{item.resourcePort | filterPortInfo }}</span>
            <label class="review-ct-label">局向名称：</label>
            <span class="review-info-ctinfo">{{item.resourcePort | filterPortName }}</span>
          </el-row>
          <el-row>
            <label class="review-ct-label">装机地址：</label>
            <span class="review-info-item">{{item.installC3 | formatStr}}{{item.installC4 | formatStr}}{{item.installAddress | formatStr}}</span>
          </el-row>
        </div>
        <!--end of 每项实体内容-->
      </div>
      <el-card shadow="always" v-if="formReviewList.length == 0">
        当前无数据，不能审核！
      </el-card>
      <div slot="footer" class="dialog-footer xc-button-center">
        <el-button @click="handleCloseReviewDialog">取 消</el-button>
        <el-button type="primary" @click.native="handleSaveReviewAddr" :disabled="formReviewList.length>0 ? false : true">提 交</el-button>
      </div>
    </el-dialog>
    <!-- end of 移机地址审核的对话框 -->

CSS:

//地址审核收缩展开
  .config-block-box{
    position:relative;
    border-radius:2px;
    border:#7B77A2 2px solid;
    margin-bottom:.5rem;

    .block-title-bar{
      position:relative;
      border-radius:2px 2px 0px 0px;
      color:#FFFFFF;
      background-color:#7B77A2;

      .title{
        position:relative;
        line-height:30px;
        padding-left:1rem;
      }

      .title-action-box{
        position:absolute;
        right:1rem;
        top:0px;
        height:20px;
        padding-top:5px;

        .extend-btn{
          position:relative;
          display:inline-block;
          cursor:pointer;
          padding:0 .5rem;
        }
      }
    }

    .block-body-box{
      position:relative;
      padding:.5rem 1rem;
    }

    //收缩状态
    &.shrink{
      .extend-btn{
        transition:all .5s;
        transform:rotate(180deg);
      }
      .block-body-box{
        height:0px;
        padding:0;
        overflow:hidden;
        transition:all .5s;
      }
    }
  }

JS:

//地址审核
      handleReviewAddr( row ){
        let self = this ; 
        self.formReviewList = '';
        self.alternativeList = '';
        getMovOrderDetailById( row.localOrderId ).then( response => {
          let res = response.data ;
          if( res.code == 200 ){
            self.formReviewList = JSON.parse( JSON.stringify( res.data ) );
            self.alternativeList = JSON.parse( JSON.stringify( res.data ) );
            self.formReviewList.forEach( item =>{
              self.$set(item,'originalResourcePort',item.resourcePort);
              self.$set(item,'originalAddressId',item.resourceAddressId);
              // 自定义一个属性来控制每一项对象的展开/收缩
              self.$set(item,'isShrink',true)
            })
          }  
        });
        self.reviewDialogVisible = true ;
        self.localOrderId = row.localOrderId;
        return ;
      },

//切换区块收缩/展开状态
handleListSpread( item ){
   let self = this;
   item.isShrink = !item.isShrink;
},

这样就简单的做好了一个折叠板。