table中巢狀多層table
阿新 • • 發佈:2019-02-13
因工作業務需求,需要展示一個多層巢狀的資料結構,現整理如下,分享給需要的朋友,應用框架vue2。
初始的資料結構如下:
new Vue({
el:"#table1",
data:{
table1:[{
order: "ex-20171006",
table2: [{
kind: '蘋果',
table3: [{
variety: '紅富士',
origin: '山東-德州'
},{
variety: '藍富士',
origin: '山東-威海'
}]
},{
kind: '梨',
table3: [{
variety: '大鴨梨',
origin: '山西-大同'
},{
variety : '雪花梨',
origin: '山西-太原'
}]
}]
}]
}
})
HTML部分:
<table id="table1">
<tr>
<th>序號</th>
<th>訂單</th>
<th class="w200">名稱</th>
<th class="w200">品種</th>
<th class="w200">產地</th>
</tr>
<tr v-for="(item,i) in table1">
<td>{{i}}</td>
<td>{{item.order}}</td>
<td colspan="3">
<table class="table2">
<tr v-for="(par, j) in item.table2">
<td class="w200">{{par.kind}}</td>
<td>
<table class="table3">
<tr v-for="val in par.table3">
<td class="w200">{{val.variety}}</td>
<td class="w200">{{val.origin}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS部分:
* {margin: 0;padding: 0;}
body {
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
table th,td {
border: 1px solid #999;
}
.table2 tr td:nth-child(1) {
border-left: 0;
}
.table2 tr td:nth-last-child(1) {
border-right: 0;
}
.table2 tr:nth-child(1) td{
border-top: 0;
}
.table2 tr:nth-last-child(1) td {
border-bottom: 0;
}
.w200 {
width: 200px;
}
實現效果:
上述寫法還有一個缺點,就是瀏覽器縮小到一定程度,表格的樣式會變形,內部table與外部table的單元格線對不齊:
解決方法,給最外圍table加一個最小寬度,具體最小寬度定義多少視內部table的td寬度和td列數合計為參考值,此例子最小值設為1000px:
#table1 {
min-width: 1000px;
}
最後效果圖:
以上部分有不足之處,歡迎指出,謝謝。
以上只是自定義結構展示,殊不知Vue自帶一個template模板標籤,可以用v-for迴圈指令,渲染出來是沒有實際標籤的,特別適合table標籤中迴圈渲染特殊的資料結構。