Vue3的页面布局设计入门

<template>
  <div id="app">
    <!-- 顶部banner -->
    <header>
      <h1>欢迎使用Vue 3页面布局</h1>
    </header>

    <!-- 左侧导航 -->
    <aside :class="{ collapsed: isCollapsed }">
      <nav>
        <ul>
          <li>
            <a href="https://blog.51cto.com/u_16229717/7127698">菜单项1</a>
            <ul>
              <li><a href="https://blog.51cto.com/u_16229717/7127698">子菜单项1</a></li>
              <li><a href="https://blog.51cto.com/u_16229717/7127698">子菜单项2</a></li>
            </ul>
          </li>
          <li>
            <a href="https://blog.51cto.com/u_16229717/7127698">菜单项2</a>
            <ul>
              <li><a href="https://blog.51cto.com/u_16229717/7127698">子菜单项3</a></li>
              <li><a href="https://blog.51cto.com/u_16229717/7127698">子菜单项4</a></li>
            </ul>
          </li>
        </ul>
      </nav>
      <button @click="toggleCollapse">折叠导航</button>
    </aside>

    <!-- 表格 -->
    <main>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.description }}</td>
          </tr>
        </tbody>
      </table>
    </main>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      isCollapsed: false, // 导航栏折叠状态
      tableData: [] // 表格数据
    };
  },
  mounted() {
    // 在组件挂载后，使用axios异步获取后端数据
    axios.get('/api/data')
      .then(response => {
        this.tableData = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    }
  }
};
</script>

<style>
/* 样式可根据实际需求进行调整 */
#app {
  display: flex;
}

header {
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
}

aside {
  width: 200px;
  background-color: #333;
  color: #fff;
  transition: width 0.3s;
}

aside.collapsed {
  width: 50px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
}

nav li {
  margin-bottom: 5px;
  position: relative;
}

nav a {
  color: #fff;
  text-decoration: none;
}

nav ul ul {
  display: none;
  position: absolute;
  left: 100px;
  top: 0;
}

nav li:hover > ul {
  display: inherit;
}

main {
  flex: 1;
  padding: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f0f0f0;
}
</style>