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 }