vue 隐藏表格 有数据再显示

可以使用 v-if 指令来实现隐藏表格，只有在有数据时才显示表格。假设有一个名为 dataList 的数组，可以这样写：

<template>
  <div>
    <button @click="showTable = !showTable">显示/隐藏表格</button>
    <table v-if="showTable && dataList.length">
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in dataList" :key="item.id">
          <td>{{ item.col1 }}</td>
          <td>{{ item.col2 }}</td>
          <td>{{ item.col3 }}</td>
        </tr>
      </tbody>
    </table>
    <div v-else>
      暂无数据
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTable: true,
      dataList: [
        { id: 1, col1: '数据1-列1', col2: '数据1-列2', col3: '数据1-列3' },
        { id: 2, col1: '数据2-列1', col2: '数据2-列2', col3: '数据2-列3' },
        { id: 3, col1: '数据3-列1', col2: '数据3-列2', col3: '数据3-列3' },
      ],
    }
  },
}
</script>

上面的代码中，使用了 showTable 变量来控制表格的显示和隐藏；使用 v-if 指令判断 dataList 数组是否有数据，如果有数据才显示表格，否则显示“暂无数据”的提示。