element-ui實現table表格的嵌套（table表格嵌套）功能實現

 

最近在做電商類型的官網，希望實現的佈局如下：有表頭和表身，所以我首先想到的就是table表格組件。

表格組件中常見的就是：標題和內容一一對應：

像效果圖中的效果，只用基礎的表格佈局是不行的，因此我想到了table表格中的展開功能：

然後通過：默認展開所有行

然後在裏面的表格table中默認隱藏表頭：

其他的則需要通過樣式進行實現了

element-ui中table表格的嵌套（代碼部分）

 <el-table v-bind:data="tableData" :default-expand-all="true" class="parentTable"
       ref="multipleTable"
       v-loading="loading"
       element-loading-text="拼命加載中">
 <el-table-column type="expand">
     <template slot-scope="props">
         <div class="conWrap" style="text-align: left;line-height: 16px;font-size: 14px;position: relative;top: -10px;">
             <span>訂單包號：{{props.row.OrderNo}}</span>
             <span style="margin-left:42px;">付款時間：{{props.row.CreateTime}}</span>
         </div>
         <el-table v-bind:data="props.row.OrderDetails" :default-expand-all="true" stripe :show-header="false" class="childTable">
             <el-table-column prop="PartNo" align="center"
                              label="產品型號"
                              width="180">
                 <template slot-scope="scope">
                     <div class="name-b">{{scope.row.PartNo}}</div>
                 </template>
             </el-table-column>
             <el-table-column prop="Mfg"
                              label="品牌" width="199">
                 <template slot-scope="scope">
                     <div class="name-b">{{scope.row.Mfg}}</div>
                 </template>
             </el-table-column>
             <el-table-column prop="Package"
                              label="封裝" width="114">
                 <template slot-scope="scope">
                     <div class="name-b">{{scope.row.Package}}</div>
                 </template>
             </el-table-column>
             <el-table-column prop="miaoshu"
                              label="描述" width="300">
                 <template slot-scope="scope">
                     <div class="name-b" style="width:100%;">72MHZ 20KB 37 2V~3.6V-40°C~85°C（TA）<