用vue写一个table表格展开行内嵌一个具有完整勾选功能表格的具体代码

以下是用 Vue 写一个具有展开行和内嵌勾选功能的表格的代码示例：

<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
<td>
<button @click="toggleSubTable(index)">
{{ showSubTableIndex === index ? '收起' : '展开' }}
</button>
</td>
</tr>
<tr v-if="showSubTableIndex !== null">
<td colspan="4">
<table>
<thead>
<tr>
<th>选择</th>
<th>课程</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr v-for="(subItem, subIndex) in tableData[showSubTableIndex].subTable" :key="subIndex">
<td>
<input type="checkbox" v-model="subItem.checked">
</td>
<td>{{ subItem.course }}</td>
<td>{{ subItem.score }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20,
gender: '男',
subTable: [
{ course: '语文', score: 80, checked: false },
{ course: '数学', score: 90, checked: false },
{ course: '英语', score: 85, checked: false }
]
},
{
name: '李四',
age: 22,
gender: '女',
subTable: [
{ course: '语文', score: 75, checked: false },
{ course: '数学', score: 95, checked: false },
{ course: '英语', score: 90, checked: false }
]
},
{
name: '王五',
age: 18,
gender: '男',
subTable: [
{ course: '语文', score: 70, checked: false },
{ course: '数学', score: 80, checked: false },
{ course: '英语', score: 75, checked: false }
]
}
],
showSubTableIndex: null
}
},
methods: {
toggleSubTable(index) {
if (this.showSubTableIndex === index) {
this.showSubTableIndex = null
} else {
this.showSubTableIndex = index
}
}
}
}
</script>