这个效果终于实现了！

html的写法：

<x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;" v-for="office,officeIndex in list.offices">
			
				<tr style="background-color: #F7F7F7">
					<th colspan="5" @click="spaceChange(listIndex,officeIndex)">{{ office.office}}</th>
				</tr>
				
				<tbody>
					<tr v-if="office.showSpace">
						<td height="50px;"></td>
						<td><x-button mini type="primary">基本信息</x-button></td>
						<td><x-button mini type="primary">工作汇报</x-button></td>
						<td><x-button mini type="primary">客户档案</x-button></td>
						<td><x-button mini type="primary">患者档案</x-button></td>
					</tr>
				</tbody>
			
			</x-table>

在这里是使用的 v-for 的嵌套显示，重点是如何精确的控制每个科室的展开。

我的思路是通过@click方法，定位当前按钮的位置然后显示。

看文档之后，发现v-for有index这个属性，然后翻博客之后发现index属性是可以嵌套的

然后直接用名字就可以直接使用了

js的写法:

export default {
	data(){
		return{
			lists:[
			{
				hospital:'上海市第一医院',
				offices:[{ 
					office:'第一科室',
					showSpace:false
				},
				{
					office:'第二科室',
					showSpace:false
				}]
			},{
				hospital:'上海市第二医院',
				offices:[{
					office:'第一科室',
					showSpace:false
				},
				{
					office:'第二科室',
					showSpace:false
				}]
			},
			{
				hospital:'上海市第三医院',
				offices:[{
					office:'第一科室',
					showSpace:false
				},
				{
					office:'第二科室',
					showSpace:false
				}]
			}
			]
		}
	},
	methods: {
		spaceChange (listIndex,officeIndex) {
			console.log(listIndex+"  "+officeIndex);
			this.lists[listIndex].offices[officeIndex].showSpace = !this.lists[listIndex].offices[officeIndex].showSpace
		}
	},
	components:{
		Footer,
		Header,
		XTable,
		LoadMore,
		XButton,
		CellBox,
		Box
	}
}
</script>

这里注意，listIndex和officeIndex的位置，一定要准确