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）</div>
                 </template>
             </el-table-column>
             <el-table-column prop="ProductNum" align="center" width="120"
                              label="申请数量">
                 <template slot-scope="scope">
                     <div class="name-b">{{scope.row.ProductNum}}</div>
                 </template>
             </el-table-column>
             <el-table-column prop="maxNum"
                              label="申请状态">
                 <template slot-scope="scope">
                     <div>
                         <el-popover trigger="hover" placement="right" v-if="scope.row.State==20||scope.row.State==40">
                             <p v-if="scope.row.State==20">失败原因: {{ scope.row.FailReason }}</p>
                             <p v-if="scope.row.State==40">物流信息: {{ scope.row.ExpressNo }}</p>
                             <div slot="reference" class="name-wrapper">
                                 {{scope.row.State |fiterState(stateMenu)}}
                                 <span v-if="scope.row.State==40" style="margin-left:14px;color:#B77C20;">物流信息</span>
                                 <span v-if="scope.row.State==20" style="margin-left:14px;color:#B77C20;">查看原因</span>
                             </div>
                         </el-popover>
                         <div v-else>
                             {{scope.row.State |fiterState(stateMenu)}}
                         </div>
                     </div>
                 </template>
             </el-table-column>
             <el-table-column label="操作" width="162">
                 <template slot-scope="scope">
                     <div style="display:flex;">
                         <el-button type="text" size="small" v-on:click="cancel(scope.row)" v-if="scope.row.State==10||scope.row.State==20">取消</el-button>
                         <el-button type="text" size="small" v-on:click="sureHave(scope.row)" v-if="scope.row.State==40">确认收货</el-button>
                     </div>
                 </template>
             </el-table-column>
         </el-table>
     </template>
 </el-table-column>
 <el-table-column label="产品型号" align="center" width="180"></el-table-column>
 <el-table-column label="品牌" width="199"></el-table-column>
 <el-table-column label="封装" width="114"></el-table-column>
 <el-table-column label="描述"  width="300"></el-table-column>
 <el-table-column label="申请数量" align="center" width="120"></el-table-column>
 <el-table-column label="申请状态"></el-table-column>
 <el-table-column label="操作" align="center" width="118"></el-table-column>
</el-table>

最终效果图：

样式部分：

.el-table {
            border-top: none !important;
        }

        .el-table__expanded-cell {
            padding: 0 !important;
        }

        .tableWrap {
            width: 100%;
        }

        .el-tabs__nav-scroll {
            padding: 0 20px;
            box-sizing: border-box;
        }

        .tableWrap .el-table {
            width: 1240px;
            margin: 0 auto;
        }

        .el-icon.el-icon-arrow-right {
            color: #fff;
        }

        .el-table__row.expanded {
            background: #fff !important;
            position: relative !important;
            top: -100px !important;
            border: 1px solid red;
        }

        .el-tabs__content {
            display: none;
        }

        .el-table__row.expanded > td {
            padding: 7px 0;
        }

        .el-table__row.expanded {
            border: 1px solid #E5E5E5;
        }

            .el-table__row.expanded:first-child {
                border-bottom: none;
            }

        .childTable .el-table__body {
            border-top: 1px solid #E5E5E5;
        }

        .childTable .el-table__row.expanded > td:first-child {
            border-left: 1px solid #E5E5E5;
        }

        .childTable .el-table__row.expanded > td:last-child {
            border-right: 1px solid #E5E5E5;
        }

        .el-tabs__header.is-top {
            border-bottom: none;
        }

        .childTable .el-table__header-wrapper {
            display: none;
        }

        .conWrap {
            height: 44px;
            background: #E5E5E5;
            line-height: 44px;
            padding-left: 10px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            line-height: 19px;
            color: #333333;
        }

            .conWrap > span {
                line-height: 44px;
            }

        .el-table .has-gutter .is-leaf {
            position: relative !important;
            left: -48px !important;
        }

            .el-table .has-gutter .is-leaf:last-child {
                position: relative !important;
                left: 0px !important;
            }

        .el-table__header-wrapper {
            background: #EBEBEB;
        }

        .el-table .has-gutter > tr > th {
            background: #EBEBEB;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 19px;
            color: #333333;
        }

数据结构

{
    "Items":[
        {
            "OrderNo":"ICS-10390-1",
            "ProductIds":"[646,309118,331385,331393,331394]",
            "UserId":10390,
            "Applicant":"(￣▽￣*)b",
            "ApplicantMobile":"18458192430",
            "Receiver":"123",
            "CompanyName":"卡卡卡卡卡12 32  26",
            "Post":"高管",
            "Industry":"工业设计",
            "Purpose":"332",
            "Province":"广东省",
            "City":"广州市",
            "Address":"123",
            "ContactMobile":"18458192430",
            "CreateTime":"2021/9/7 8:51",
            "OrderDetails":[
                {
                    "Id":1309,
                    "OrderNo":"ICS-10390-1",
                    "SupplierId":2,
                    "ProductId":331393,
                    "ProductNum":1,
                    "ExpressNo":null,
                    "SendTime":"",
                    "ReceiveTime":"",
                    "JpSkuNo":"JPC47B1332N331393",
                    "PartNo":"cs-454",
                    "Package":"21",
                    "Mfg":"Samsung(三星)",
                    "ProPics":"https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com//IcMall/icmall/2021/4/30/2021043014452714515931.JPG",
                    "CreateTime":"2021/9/7 8:51",
                    "UpdateTime":"2021/9/7 8:51",
                    "IsDeleted":false,
                    "State":10,
                    "CheckTime":null,
                    "FailReason":null,
                    "SupplierName":"深圳前海宝利士科技有限公司",
                    "ExpressCompany":null,
                    "Ship":1
                }
            ]
        }
    ],
    "Queryable":null,
    "TotalCount":1,
    "Msg":null
}