篇首语：本文由小编为大家整理，主要介绍了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>
以上是关于Vue中table合并单元格用法的主要内容，如果未能解决你的问题，请参考以下文章
