Vue中table合并单元格用法

<table>
<tr>
<th>地名</th>
<th>结果</th>
<th>人名</th>
<th>性别</th>
</tr>
<template v-for="(item, index) in list">
<tr :key="index">
<td :rowspan="item.groups.length">{{item.name}}</td>
<td :rowspan="item.groups.length" v-if="item.result === '1'">
<span>已完成</span>
</td>
<td :rowspan="item.groups.length" v-if="item.result === '0' || item.result === null">
<span>未完成</span>
</td>
<td>{{item.groups[0].name}}</td>
<td>{{item.groups[0].sex}}</td>
</tr>
<tr v-for="(son, index) in item.groups.length - 1" :key="index">
<td>{{item.groups[son].name}}</td>
<td>{{item.groups[son].sex}}</td>
</tr>
</template>
</table>

<script>
export default {
data() {
return {
list: [{
name: '地名1',
result: '1',
groups: [{
name: '张三',
sex: '男'
}, {
name: '李四',
sex: '男'
}, {
name: '小芳',
sex: '女'
}]
},{
name: '地名2',
result: '1',
groups: [{
name: '王小二',
sex: '男'
}, {
name: '玲',
sex: '女'
}]
},{
name: '地名3',
result: '0',
groups: [{
name:'/',
sex: '/'
}]
}]
}
}
}
</script>