在Web開發中，我們經常需要使用表格（Table）展示數據。對于大量數據的表格，合理的折疊展示方式不僅能夠節省頁面空間，還可以方便用戶查看具體內容。本文將詳細介紹如何使用Vue實現Table的折疊展示功能。

<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
<td><span @click="toggle(item)">{{ item.isShow ? '隱藏' : '展開' }}</span></td>
</tr>
<tr v-if="!data.length">
<td colspan="4">暫無數據</td>
</tr>
</tbody>
</table>
</div>
</template>

以上是Table的模板代碼，其中使用了v-for循環渲染數據，并且使用了自定義指令v-loading展示加載中的效果。每一行的數據中，多了一個“展開”或“隱藏”的按鈕，這個按鈕的點擊事件對應toggle方法。

export default {
data () {
return {
data: [] // 存放表格數據的數組
}
},
methods: {
toggle (item) {
item.isShow = !item.isShow;
}
},
async created () {
try {
const res = await axios.get('http://xxx.com/api/table');
this.data = res.data;
} catch (err) {
console.log(err);
}
}
}

在以上代碼中，我們定義了數據data，并且編寫了toggle方法。toggle方法中會改變每一個數據項中的isShow屬性，從而控制該行數據的展開和收起。在created生命周期鉤子中，我們使用異步請求加載真實數據。

.isShow {
display: none;
}

為了實現展開和收起的效果，我們需要定義一個CSS類樣式：isShow。在該樣式中，設置display屬性為none可以隱藏該行的所有數據內容。

.isShow td {
padding: 0!important;
border: none!important;
}

該樣式定義了所有td元素都不要設置邊框，并且padding為0，從而實現隱藏的效果。

:nth-of-type(-n+3) {
display: table-cell;
background: #f5f5f5;
}
:nth-of-type(n+4) {
display: none;
}

最后，我們需要定義展開和收起后的樣式效果，來實現折疊和展開的效果。我們使用CSS的nth-of-type選擇器來選擇行中的第4行到最后一行：

當行的isShow值為真時，顯示所有的td元素，并且背景設置成灰色；當行的isShow值為假時，隱藏這些td元素。

代碼實現完成之后，我們可以通過在table數據中控制isShow屬性，來實現Table的展開和收起效果。該方法不僅可以用于Table組件，還可以應用在其他需要折疊或展開內容的組件中。