vue 控制table数据显示隐藏方法

可以使用 Vue 的条件渲染指令 `v-if` 或 `v-show` 来控制表格数据的显示和隐藏。

`v-if` 指令会根据表达式的结果决定是否渲染元素，如果表达式的值为 false 或者 undefined，则元素不会被渲染到页面上。例如：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody v-if="showData">
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

在上面的例子中，当 `showData` 的值为 true 时，表格数据才会被渲染到页面上。

`v-show` 指令也可以控制元素的显示和隐藏，但是不同的是，元素始终会被渲染到页面上，只是根据表达式的值来决定是否显示。例如：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody v-show="showData">
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

在上面的例子中，不管 `showData` 的值是 true 还是 false，表格数据都会被渲染到页面上，只是根据表达式的值来决定是否显示。