el-table隐藏表体

### 隐藏 Element UI `el-table` 表格主体

为了实现隐藏 `el-table` 的表格主体部分，可以通过 CSS 控制 `.el-table__body-wrapper` 和 `.el-table__body` 类的选择器来达到效果。具体方法如下：

通过设置 `.el-table__body-wrapper` 和 `.el-table__body` 的显示属性为 `none` 可以有效地隐藏整个表格主体内容。

.el-table__body-wrapper {
    display: none;
}

/* 或者 */
.el-table__body {
    display: none;
}

上述任一方式都可以使表格中的数据行不再展示给用户[^1]。

值得注意的是，在某些情况下仅隐藏`.el-table__body-wrapper`即可满足需求；如果仍然存在残留的布局问题，则可以尝试同时隐藏两个元素确保完全不可见。

另外一种更灵活的做法是在 Vue 组件内部利用条件渲染控制 `<el-table>` 是否加载其子组件，即不渲染任何与表体有关的部分。这通常涉及到父级容器逻辑判断以及 v-if 指令的应用。

<template>
  <el-table :data="tableData" v-if="showTableBody">
      <!-- 列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      showTableBody: false,
    };
  },
};
</script>

这种方式不仅能够彻底移除 DOM 结构里的表体节点，而且可以根据实际业务场景动态切换显示状态。