Vue el-table 展開顯示明細

需求：點開第一個table的展開明細，展示下面的第二個列表

<el-row style="margin-bottom:10px;" v-for="(data, index) in dataList" :key="index">
    <el-table
      border
      :data="data | dataFilter"  // 因為table遍歷必須是數組形式，當前返回的是對象，使用Vue的過濾器
      v-loading="dataListLoading"
      style="width: 100%;"
     v-if="dataList"
    >
      <el-table-column type="index" width="80">
          <template slot-scope="scope">
          <el-button type="size" :icon="!data.showContent ?'el-icon-arrow-down':'el-icon-arrow-up'" @click="getmoreshow(scope.row, index)"></el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="batchNumber" header-align="center" align="center" label="批次" >
      </el-table-column> -->
      <el-table-column prop="deliverBillNo" header-align="center" align="center" label="發貨單號">
      </el-table-column>
      <el-table-column prop="deliverUser" header-align="center" align="center" label="發貨人">
      </el-table-column>
      <el-table-column prop="deliverDate" header-align="center" align="center" label="發貨日期">
      </el-table-column>
      <el-table-column prop="mobile" header-align="center" align="center" label="電話號碼">
      </el-table-column>
      <el-table-column prop="deliverType" header-align="center" align="center" label="發貨方式">
      </el-table-column>
      <el-table-column prop="expressCompany" header-align="center" align="center" label="快遞公司">
      </el-table-column>
      <el-table-column prop="expressNo" header-align="center" align="center" label="快遞單號">
      </el-table-column>
    </el-table>
    <el-table
      :data="data.detailVoList"
      border
      v-loading="dataListLoading"
      style="width: 100%; margin-top:10px"
      v-if="data.showContent"
    >
      <el-table-column prop="goodsName" header-align="center" align="center" label="備品名稱" >
      </el-table-column>
      <el-table-column prop="goodsCode" header-align="center" align="center" label="物品編碼" >
      </el-table-column>
      <el-table-column prop="specification" header-align="center" align="center" label="規格">
      </el-table-column>
      <el-table-column prop="model" header-align="center" align="center" label="型號">
      </el-table-column>
      <el-table-column prop="edition" header-align="center" align="center" label="版本">
      </el-table-column>
      <el-table-column prop="configuration" header-align="center" align="center" label="配置">
      </el-table-column>
      <el-table-column prop="remark" header-align="center" align="center" label="備注">
      </el-table-column>
      <el-table-column prop="deliverQuantity" header-align="center" align="center" label="發貨量">
      </el-table-column>
    </el-table>
    <div class="status-btn" v-if="data.status === '0'">未收貨</div>
    <div class="status-btn" v-if="data.status === '1'">已收貨</div>
    <div style="border:1px solid #ebeef5; margin-top:10px"></div>
</el-row>

filters:{
        dataFilter:(value) => {
            let a = []
            a.push(value)
            return a;
        }
    },

getmoreshow(row, index){ // 點擊隱藏或顯示
        this.currentIndex = index
          var show = !this.dataList[index].showContent  // 通過傳遞index, 可以得知當前選中的是哪一條，即可控制當前這一條顯示或隱藏
          this.$set(this.dataList, index, { ...this.dataList[index], showContent: show })
      },

getInfo () {
        this.$http.get(`${window.SITE_CONFIG['baseURL']}/lclb/deliver/info/${this.$route.query.id}`)
        .then((data) => {
            // console.log(data)
          if (data && data.code === '1' && data.result.code === 0) {
            this.dataList = data.result.data.deliverVo
            this.dataList.forEach(item => {
                item.showContent = false // 給數組里面的每一條單獨加上一個屬性showContent: 通過控制每一條數據自己的屬性showContent 來顯示或隱藏當前一條的，
而不是一個動，其他的也會受到影響

            })
          }
        })
      },