element-ui實現table表格的巢狀(table表格巢狀)功能實現
阿新 • • 發佈:2022-04-11
最近在做電商型別的官網,希望實現的佈局如下:有表頭和表身,所以我首先想到的就是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)<