写一份vue动态横向合并和动态纵向合并的代码

以下是Vue动态横向合并和动态纵向合并的代码示例：

动态横向合并：

<template>
<div>
<table>
<thead>
<tr>
<th v-for="(header, index) in headers" :colspan="header.colspan" :rowspan="header.rowspan">
{{ header.label }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :colspan="cell.colspan" :rowspan="cell.rowspan">
{{ cell.label }}
</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
data() {
return {
headers: [
{ label: 'Header 1', colspan: 2, rowspan: 2 },
{ label: 'Header 2', colspan: 2, rowspan: 1 },
{ label: 'Header 3', colspan: 1, rowspan: 2 },
],
rows: [
[
{ label: 'Row 1 Cell 1', colspan: 1, rowspan: 1 },
{ label: 'Row 1 Cell 2', colspan: 1, rowspan: 1 },
{ label: 'Row 1 Cell 3', colspan: 2, rowspan: 1 },
],
[
{ label: 'Row 2 Cell 1', colspan: 1, rowspan: 1 },
{ label: 'Row 2 Cell 2', colspan: 1, rowspan: 1 },
{ label: 'Row 2 Cell 3', colspan: 1, rowspan: 1 },
{ label: 'Row 2 Cell 4', colspan: 1, rowspan: 1 },
],
],
};
},
};
</script>

动态纵向合并：

<template>
<div>
<table>
<thead>
<tr>
<th v-for="(header, index) in headers" :colspan="header.colspan" :rowspan="header.rowspan">
{{ header.label }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :colspan="cell.colspan" :rowspan="cell.rowspan">
{{ cell.label }}
</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
data() {
return {
headers: [
{ label: 'Header 1', colspan: 1, rowspan: 2 },
{ label: 'Header 2', colspan: 1, rowspan: 2 },
{ label: 'Header 3', colspan: 2, rowspan: 1 },
],
rows: [
[
{ label: 'Row 1 Cell 1', colspan: 1, rowspan: 1 },
{ label: 'Row 1 Cell 2', colspan: 1, rowspan: 1 },
{ label: 'Row 1 Cell 3', colspan: 1, rowspan: 2 },
{ label: 'Row 1 Cell 4', colspan: 1, rowspan: 2 },
],
[
{ label: 'Row 2 Cell 1', colspan: 1, rowspan: 1 },
{ label: 'Row 2 Cell 2', colspan: 1, rowspan: 1 },
],
],
};
},
};
</script>