3 changed files with 64 additions and 67 deletions
@ -1,65 +1,41 @@ |
|||
<template> |
|||
<tbody> |
|||
<tr> |
|||
<td v-if="level === 1" :rowspan="calculateRowspan(item)">{{ item.categoryName }}</td> |
|||
<td v-else></td> |
|||
<td v-if="level === 2" :rowspan="calculateRowspan(item)">{{ item.categoryName }}</td> |
|||
<td v-else></td> |
|||
<td v-if="level === 3" :rowspan="calculateRowspan(item)">{{ item.categoryName }}</td> |
|||
<td v-else></td> |
|||
<td v-if="level === 4">{{ item.categoryName }}</td> |
|||
<td v-if="level === 4">{{ item.eventCount }}</td> |
|||
<td v-if="level === 4">{{ item.proportion }}</td> |
|||
</tr> |
|||
<component |
|||
v-for="child in item.children" |
|||
:is="'TableRow'" |
|||
:key="child.id" |
|||
:item="child" |
|||
:level="level + 1" |
|||
/> |
|||
</tbody> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'TableRow', |
|||
props: { |
|||
item: { |
|||
type: Object, |
|||
required: true, |
|||
<tbody> |
|||
<tr> |
|||
<td v-if="level === 1">{{ item.categoryName }}</td> |
|||
<td v-else></td> |
|||
<td v-if="level === 2">{{ item.categoryName }}</td> |
|||
<td v-else></td> |
|||
<td v-if="level === 3">{{ item.categoryName }}</td> |
|||
<td v-else></td> |
|||
<td v-if="level === 4">{{ item.categoryName }}</td> |
|||
<td v-else></td> |
|||
<td>{{ item.eventCount }}</td> |
|||
<td>{{ item.proportion }}</td> |
|||
</tr> |
|||
<TableRow |
|||
v-for="child in item.children" |
|||
:key="child.id" |
|||
:item="child" |
|||
:level="level + 1" |
|||
/> |
|||
</tbody> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'TableRow', |
|||
props: { |
|||
item: { |
|||
type: Object, |
|||
required: true, |
|||
}, |
|||
level: { |
|||
type: Number, |
|||
required: true, |
|||
}, |
|||
}, |
|||
level: { |
|||
type: Number, |
|||
required: true, |
|||
components: { |
|||
TableRow: () => import('./TableRow.vue'), // 动态导入自身以处理递归 |
|||
}, |
|||
}, |
|||
methods: { |
|||
calculateRowspan(item) { |
|||
if (!item.children || !item.children.length) { |
|||
return 1; |
|||
} |
|||
return item.children.reduce((sum, child) => sum + this.calculateRowspan(child), 0); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
th, td { |
|||
width: 40px; |
|||
height: 20px; |
|||
border: 1px solid #ccc; |
|||
padding: 8px; |
|||
text-align: center; |
|||
} |
|||
|
|||
thead { |
|||
background-color: #f9f9f9; |
|||
} |
|||
</style> |
|||
}; |
|||
</script> |
Loading…
Reference in new issue