常見的表格數據結構
目錄
第一種表格數據結構
<template></template>
// javascript
export default {
name: 'app',
data () {
return {
data: [
{ a: 'td1', b: 'td2', c: 'td3', d: 'td4' },
{ a: 'td1', b: 'td2', c: 'td3', d: 'td4' }
]
}
}
}
第二種表格數據結構
export default {
name: 'app',
data () {
return {
data: [
{
a: 'td1',
data: [
{ b: 'td2', c: 'td3', d: 'td4' },
{ b: 'td2', c: 'td3', d: 'td4' }
]
},
{
a: 'td1',
data: [
{ b: 'td2', c: 'td3', d: 'td4' },
{ b: 'td2', c: 'td3', d: 'td4' }
]
}
]
}
}
}
第三種表格數據結構
<template>
<div id="app">
<!-- 第一層 -->
<table
class="table"
width="100%"
border="1"
cellspacing="0"
cellpadding="0">
<!-- 表頭 -->
<thead>
<tr>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
<th>標題4</th>
</tr>
</thead>
<!-- 表體 -->
<tbody>
<tr
v-for="(item, index) in data"
:key="index">
<td colspan="1">{{ item.a }}</td>
<td colspan="3">
<!-- 第二層 -->
<table
class="table"
width="100%"
border="1"
cellspacing="0"
cellpadding="0">
<tr
v-for="(child, index) in item.data"
:key="index">
<td>{{ child.b }}</td>
<td colspan="2">
<!-- 第三層 -->
<table
class="table"
width="100%"
border="1"
cellspacing="0"
cellpadding="0">
<tr
v-for="(children, index) in child.data"
:key="index">
<td>{{ children.c }}</td>
<td>{{ children.d }}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</template>
export default {
name: 'app',
data () {
return {
data: [
{
a: 'td1',
data: [
{
b: 'td2',
data: [
{ c: 'td3', d: 'td4' },
{ c: 'td3', d: 'td4' },
{ c: 'td3', d: 'td4' }
]
},
{
b: 'td2',
data: [
{ c: 'td3', d: 'td4' },
{ c: 'td3', d: 'td4' },
{ c: 'td3', d: 'td4' }
]
}
]
},
{
a: 'td1',
data: [
{
b: 'td2',
data: [
{ c: 'td3', d: 'td4' },
{ c: 'td3', d: 'td4' },
{ c: 'td3', d: 'td4' }
]
},
{
b: 'td2',
data: [
{ c: 'td3', d: 'td4' },
{ c: 'td3', d: 'td4' },
{ c: 'td3', d: 'td4' }
]
}
]
}
]
}
}
}
未完待續...