el-table expand 实现手风琴效果

在项目开发过程中总有各种各样的需求。在使用el-table时，想 点击某行展示（或收起）更多 详细信息也是比较常见的一个。
本文使用expand来控制显示隐藏，使用效果如下：

<el-table ref="tableList" :data="liveGoodArr" @sort-change="shortChange" v-loading='loading' :header-cell-style="{ background: '#2D3140', border: '#343648', color: '#B6BFD7' }" :cell-style="{ background: '#252735', border: '#343648', color: '#B6BFD7' }" class="customer-table" height="45vh">
   <template slot="empty">
      <div>
        <img class="emptyImg" src="~assets/images/empty.png" alt="" />
      </div>
    </template>
    <el-table-column property="name" label="商品信息" width="100">
      <template slot-scope="scope">
        <div class="goodDetail flex align-center">
          <img :src="scope.row.photoaddr" alt="" class="goodImg" v-if="scope.row.photoaddr" />
          <img src="../../assets/images/headPhoto.png" style="border-radius: 10px" v-else alt="" />
        </div>
      </template>
    </el-table-column>
    <el-table-column ref="tableData" v-for="(item, index) in tableDataHeader" :key="index" :label="item.label" :property="item.property" sortable="custom">
      <template slot-scope="scope">
        <div v-if="item.label == '上架时间'">
          {{ scope.row.addtime | dataHMS }}
        </div>
        <div v-else-if="item.label == '成交转化率'">
          <span v-if="scope.row.paybuyerrateformat">{{ Number(scope.row.paybuyerrateformat).toFixed(2)
          }}%</span>
          <span v-else>--</span>
        </div>
        <div v-else>
          <div v-if="scope.row[scope.column.property]">{{ scope.row[scope.column.property] }}</div>
          <div v-else>--</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column align="right" width="50" property="operation">
      <template slot="header" slot-scope="scope">
        <div class="left-down-table-img" @click="checkList = !checkList">
          <img class="imger" src="../../assets/images/select.png" alt="">
        </div>
      </template>
      <template slot-scope="scope">
        <div style="text-align:center" @click="tabledetail(scope.row,scope.$index)">
        <!--turning 翻转效果-->
          <i class="el-icon-caret-top" v-if="toggleRowIndex == scope.$index" :class="{'turning': !scope.row.expanded}"></i>
          <i class="el-icon-caret-bottom" v-else></i>
        </div>
      </template>
    </el-table-column>
    <!--expand 核心-->
    <el-table-column type="expand" width="1">
      <template slot-scope="props">
        <div class="expandTotal">该商品共讲解 {{liveGoodArrChild.length}} 次</div>
        <el-table :data="liveGoodArrChild" max-height="210px" v-loading='liveGoodArrChildLoading' :header-cell-style="{ background: '#2D3140', border: '#343648', color: '#B6BFD7' }" :cell-style="{ background: '#2D3140', border: '#343648', color: '#FFFFFF' }">
          <el-table-column property="time" label="讲解时间" min-width="120">
            <template slot-scope="scope">
              <div>
                {{scope.row.itemExplainStartTime | dataHMS}}-{{scope.row.itemExplainEndTime | dataHMS}}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="clickRatio" label="讲解-曝光点击率" width="120" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.clickRatio*100 | getHavePercentWord}}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="cartRatio" label="讲解-曝光加购率" width="120" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.cartRatio*100 | getHavePercentWord}}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="dealRatio" label="讲解-成交转化率" width="120" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.dealRatio*100 | getHavePercentWord}}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="itemSaleQty" label="销量" width="100" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.itemSaleQty}}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="itemSaleAmt" label="成交金额" width="100" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.itemSaleAmt}}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>

 this.liveGoodArr = res.data.map((item) => {
    return {
      ...item,
      expanded: false
    }
  })

tabledetail(row, index) {
  this.toggleRowIndex = null
   this.liveGoodArrChildLoading = true
   const data = {
     itemId: row.shoppingid,
     liveId: this.liveId
   }
   explainList(data)
     .then((res) => {
       if (res.status === 200) {
         this.liveGoodArrChildLoading = false
         this.liveGoodArrChild = res.data
         let $table = this.$refs.tableList
         this.liveGoodArr.map((item) => {
           if (row.shoppingid != item.shoppingid) {
             $table.toggleRowExpansion(item, false)
           }
         })
         if (res.data.length > 0) {
           $table.toggleRowExpansion(row)
           this.toggleRowIndex = index
           row.expanded = !row.expanded
         } else {
           this.$message.warning("暂无数据")
         }
       } else {
         this.liveGoodArrChildLoading = false
       }
     })
     .catch(() => {
       this.liveGoodArrChildLoading = false
     })
 }

.turning {
  transform: rotate(180deg);
 }