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 来显示或隐藏当前一条的，
而不是一个动，其他的也会受到影响

            })
          }
        })
      },