1.template 部分的
<template>
<table border="1">
<tbody>
<tr v-for="(item, index) in dataSource" :key="item.id">
<td v-if="isFirstOfSameGroup(item, index)" :rowspan="getRowCountOfSameGroup(item, index)">
{{ item.name }}
</td>
<td>{{ item.value }}</td>
</tr>
</tbody>
</table>
</template>
2.js部分的
<script>
export default {
data() {
return {
dataSource: [
{ id: 1, name: 'A', value: 'foo' },
{ id: 2, name: 'A', value: 'bar' },
{ id: 3, name: 'B', value: 'baz' },
{ id: 4, name: 'A', value: 'qux' },
{ id: 5, name: 'C', value: 'quux' },
],
};
},
methods: {
isFirstOfSameGroup(item, index) {
return index === 0 || this.dataSource[index - 1].name !== item.name;
},
getRowCountOfSameGroup(item, index) {
let count = 1;
for (let i = index + 1; i < this.dataSource.length; i++) {
if (this.dataSource[i].name === item.name) {
count++;
} else {
break;
}
}
return count;
},
},
};
</script>