example.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <el-container class="layout-container-demo" style="height: 500px">
  3. <el-aside width="200px">
  4. <el-scrollbar>
  5. <el-menu :default-openeds="['1', '3']">
  6. <el-sub-menu index="1">
  7. <template #title>
  8. <el-icon><message /></el-icon>Navigator One
  9. </template>
  10. <el-menu-item-group>
  11. <template #title>Group 1</template>
  12. <el-menu-item index="1-1">Option 1</el-menu-item>
  13. <el-menu-item index="1-2">Option 2</el-menu-item>
  14. </el-menu-item-group>
  15. <el-menu-item-group title="Group 2">
  16. <el-menu-item index="1-3">Option 3</el-menu-item>
  17. </el-menu-item-group>
  18. <el-sub-menu index="1-4">
  19. <template #title>Option4</template>
  20. <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
  21. </el-sub-menu>
  22. </el-sub-menu>
  23. <el-sub-menu index="2">
  24. <template #title>
  25. <el-icon><icon-menu /></el-icon>Navigator Two
  26. </template>
  27. <el-menu-item-group>
  28. <template #title>Group 1</template>
  29. <el-menu-item index="2-1">Option 1</el-menu-item>
  30. <el-menu-item index="2-2">Option 2</el-menu-item>
  31. </el-menu-item-group>
  32. <el-menu-item-group title="Group 2">
  33. <el-menu-item index="2-3">Option 3</el-menu-item>
  34. </el-menu-item-group>
  35. <el-sub-menu index="2-4">
  36. <template #title>Option 4</template>
  37. <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
  38. </el-sub-menu>
  39. </el-sub-menu>
  40. <el-sub-menu index="3">
  41. <template #title>
  42. <el-icon><setting /></el-icon>Navigator Three
  43. </template>
  44. <el-menu-item-group>
  45. <template #title>Group 1</template>
  46. <el-menu-item index="3-1">Option 1</el-menu-item>
  47. <el-menu-item index="3-2">Option 2</el-menu-item>
  48. </el-menu-item-group>
  49. <el-menu-item-group title="Group 2">
  50. <el-menu-item index="3-3">Option 3</el-menu-item>
  51. </el-menu-item-group>
  52. <el-sub-menu index="3-4">
  53. <template #title>Option 4</template>
  54. <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
  55. </el-sub-menu>
  56. </el-sub-menu>
  57. </el-menu>
  58. </el-scrollbar>
  59. </el-aside>
  60. <el-container>
  61. <el-header style="text-align: right; font-size: 12px">
  62. <div class="toolbar">
  63. <el-dropdown>
  64. <el-icon style="margin-right: 8px; margin-top: 1px"
  65. ><setting
  66. /></el-icon>
  67. <template #dropdown>
  68. <el-dropdown-menu>
  69. <el-dropdown-item>View</el-dropdown-item>
  70. <el-dropdown-item>Add</el-dropdown-item>
  71. <el-dropdown-item>Delete</el-dropdown-item>
  72. </el-dropdown-menu>
  73. </template>
  74. </el-dropdown>
  75. <span>Tom</span>
  76. </div>
  77. </el-header>
  78. <el-main>
  79. <el-scrollbar>
  80. <el-table :data="tableData">
  81. <el-table-column prop="date" label="Date" width="140" />
  82. <el-table-column prop="name" label="Name" width="120" />
  83. <el-table-column prop="address" label="Address" />
  84. </el-table>
  85. </el-scrollbar>
  86. </el-main>
  87. </el-container>
  88. </el-container>
  89. </template>
  90. <script lang="ts" setup>
  91. import { ref } from 'vue'
  92. import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
  93. const item = {
  94. date: '2016-05-02',
  95. name: 'Tom',
  96. address: 'No. 189, Grove St, Los Angeles',
  97. }
  98. const tableData = ref(Array.from({ length: 20 }).fill(item))
  99. </script>
  100. <style scoped>
  101. .layout-container-demo .el-header {
  102. position: relative;
  103. background-color: var(--el-color-primary-light-7);
  104. color: var(--el-text-color-primary);
  105. }
  106. .layout-container-demo .el-aside {
  107. color: var(--el-text-color-primary);
  108. background: var(--el-color-primary-light-8);
  109. }
  110. .layout-container-demo .el-menu {
  111. border-right: none;
  112. }
  113. .layout-container-demo .el-main {
  114. padding: 0;
  115. }
  116. .layout-container-demo .toolbar {
  117. display: inline-flex;
  118. align-items: center;
  119. justify-content: center;
  120. height: 100%;
  121. right: 20px;
  122. }
  123. </style>