看上去不太复合我的要求，elementplus没有布局组件码，必须使用div去布局么

对不起，我理解你的意思了。Element Plus 提供了一些布局组件，例如 `el-row` 和 `el-col`，你可以用它们来实现更灵活的布局。以下是一个使用 Element Plus 布局组件的示例代码：

<template>
  <div class="home">
    <el-row class="banner">
      <!-- 顶部Banner -->
    </el-row>
    <el-row class="content">
      <el-col :span="6" class="sidebar">
        <div class="logo">
          <!-- Logo -->
        </div>
        <div class="system-name">
          <!-- 系统名称 -->
        </div>
        <div class="avatar" @click="showUserInfo">
          <!-- 头像 -->
        </div>
      </el-col>
      <el-col :span="18" class="main">
        <div v-if="showTable" class="table">
          <!-- 表格内容 -->
        </div>
      </el-col>
    </el-row>
    <el-row class="footer">
      <!-- footer内容，版权信息 -->
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTable: false,
    };
  },
  methods: {
    showUserInfo() {
      // 展示个人信息
    },
  },
};
</script>

<style scoped>
/* 样式请根据自己的需求进行调整 */
.home {
  /* 主容器样式 */
}

.banner {
  /* 顶部Banner样式 */
}

.content {
  /* 内容区域样式 */
}

.sidebar {
  /* 左侧菜单导航样式 */
}

.logo {
  /* Logo样式 */
}

.system-name {
  /* 系统名称样式 */
}

.avatar {
  /* 头像样式 */
}

.main {
  /* 主内容区域样式 */
}

.table {
  /* 表格样式 */
}

.footer {
  /* footer样式 */
}
</style>

在这个示例中，我们使用了 `el-row` 和 `el-col` 组件来实现页面的布局。它们可以帮助你更方便地设置行和列的布局比例。请根据你的需求调整样式和交互逻辑。希望这次的回答能满足你的要求。如果还有其他问题，请随时提问。