常见的表格数据结构
目录
第一种表格数据结构
<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' }
]
}
]
}
]
}
}
}
未完待续...