vue实现1个div中展示表格数据默认只展示首行点击右上角按钮展开全部再次点击收起

1. 在Vue中，可以使用v-if指令来实现元素的显示和隐藏。
2. 给展开按钮绑定点击事件，通过改变数据来控制表格的展示状态。

HTML代码：

<div>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>20</td>
        <td>Male</td>
      </tr>
      <tr v-if="showAll">
        <td>Jerry</td>
        <td>18</td>
        <td>Female</td>
      </tr>
      <tr v-if="showAll">
        <td>Bob</td>
        <td>22</td>
        <td>Male</td>
      </tr>
    </tbody>
  </table>
  <button @click="showAll = !showAll">{{showAll ? '收起' : '展开'}}</button>
</div>

JavaScript代码：

export default {
  data() {
    return {
      showAll: false
    }
  }
}
``