这种表格布局怎么实现

Question

如上图，产品要求点击展开效果是内容向下撑开，而不是浮层，这种效果怎么布局？以下是我的代码。

 <table class="table w-w-b">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col width="160">
                    <col width="80">
                    <col width="180">
                    <col width="100">
                    <col width="100"/>
                    <col width="117"/>
                    <col width="123">
                </colgroup>
                <thead>
                    <tr class="active">
                        <th>SPIU ID</th>
                        <th>Detail Information</th>
                        <th>Belong to Category</th>
                        <th>Product Type</th>
                        <th>JD Price(Rp)</th>
                        <th>Time of On Shelf</th>
                        <th>Modify Time</th>
                        <th>Operator</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(ware, index) in wareList">
                        <td>
                            <input :id="'spuId_' + ware.wareId" type="checkbox" class="checkbox"/>
                            <label :for="'spuId_' + ware.wareId">{{ ware.wareId }}</label>
                            <div class="ware-detail-wrapper">
                                <a class="btn-add" :class="{'btn-minus' : showModalList[index].showFlag}" @click="showWareDetailModal(index)"></a>
                                <ware-detail-modal class="detail-wrapper" :skuInfoList="ware.skuInfoVOs" v-if="showModalList[index].showFlag"></ware-detail-modal>
                            </div>
                        </td>
                        <td class="ware-info">
                            <div class="ware-image"></div>
                            <a class="detail-info">{{ ware.spuName }}</a>
                        </td>
                        <td>{{ ware.catLv1Name }}<br/>
                            {{ ware.catLv2Name }}<br/>
                            {{ ware.catLv3Name }}
                        </td>
                        <td>{{ getProductType(ware.dropShipType) }}</td>
                        <td><span v-html="getFormatMoney(ware)"></span></td>
                        <td>{{ getFormatDate(ware.onShelfTime, 'yyyy-mm-dd hh:mm:ss')}}</td>
                        <td>{{ getFormatDate(ware.modified, 'yyyy-mm-dd hh:mm:ss')}}</td>
                        <td>{{ ware.lastOperator}}</td>
                        <td><a href="">Modify</a></td>

                      </tr> 
                    <tr v-if="wareList && wareList.length <= 0">
                        <td colspan="9">
                            <div class="text-center">No record~</div>
                        </td>
                    </tr>
                </tbody>
            </table>

Answer 1

给数据每一行绑定一个expanded属性，开始置为false
然后修改模板代码

<template v-for="(ware, index) in wareList">
  <tr @click="ware.expanded=!ware.expanded">

  </tr>
  <tr v-if="ware.expanded">
    <td colspan="9">
      <div class="text-center">No record~</div>
    </td>
  </tr>
</template>

Answer 2

https://www.iviewui.com/compo...
可以参考一下