<template>
<
el-container class="layout
-container
-demo" style="height: 500px">
<
el-aside width="200px">
<
el-scrollbar>
<
el-menu :default
-openeds="['1', '3']">
<
el-sub
-menu index="1">
<template #title>
<
el-icon><message /></
el-icon>Navigator One
</template>
<
el-menu-item
-group>
<template #title>Group 1</template>
<
el-menu-item
index="1
-1">Option 1</
el-menu-item>
<
el-menu-item
index="1
-2">Option 2</
el-menu-item>
</
el-menu-item
-group>
<
el-menu-item
-group title="Group 2">
<
el-menu-item
index="1
-3">Option 3</
el-menu-item>
</
el-menu-item
-group>
<
el-sub
-menu index="1
-4">
<template #title>Option4</template>
<
el-menu-item
index="1
-4
-1">Option 4
-1</
el-menu-item>
</
el-sub
-menu>
</
el-sub
-menu>
<
el-sub
-menu index="2">
<template #title>
<
el-icon><icon
-menu /></
el-icon>Navigator Two
</template>
<
el-menu-item
-group>
<template #title>Group 1</template>
<
el-menu-item
index="2
-1">Option 1</
el-menu-item>
<
el-menu-item
index="2
-2">Option 2</
el-menu-item>
</
el-menu-item
-group>
<
el-menu-item
-group title="Group 2">
<
el-menu-item
index="2
-3">Option 3</
el-menu-item>
</
el-menu-item
-group>
<
el-sub
-menu index="2
-4">
<template #title>Option 4</template>
<
el-menu-item
index="2
-4
-1">Option 4
-1</
el-menu-item>
</
el-sub
-menu>
</
el-sub
-menu>
<
el-sub
-menu index="3">
<template #title>
<
el-icon><setting /></
el-icon>Navigator Three
</template>
<
el-menu-item
-group>
<template #title>Group 1</template>
<
el-menu-item
index="3
-1">Option 1</
el-menu-item>
<
el-menu-item
index="3
-2">Option 2</
el-menu-item>
</
el-menu-item
-group>
<
el-menu-item
-group title="Group 2">
<
el-menu-item
index="3
-3">Option 3</
el-menu-item>
</
el-menu-item
-group>
<
el-sub
-menu index="3
-4">
<template #title>Option 4</template>
<
el-menu-item
index="3
-4
-1">Option 4
-1</
el-menu-item>
</
el-sub
-menu>
</
el-sub
-menu>
</
el-menu>
</
el-scrollbar>
</
el-aside>
<
el-container>
<
el-header style="text
-align: right; font
-size: 12px">
<div class="toolbar">
<
el-dropdown>
<
el-icon style="margin
-right: 8px; margin
-top: 1px">
<setting />
</
el-icon>
<template #dropdown>
<
el-dropdown
-menu>
<
el-dropdown
-item>View</
el-dropdown
-item>
<
el-dropdown
-item>Add</
el-dropdown
-item>
<
el-dropdown
-item>D
elete</
el-dropdown
-item>
</
el-dropdown
-menu>
</template>
</
el-dropdown>
<span>Tom</span>
</div>
</
el-header>
<
el-main>
<
el-scrollbar>
<
el-table :data="tableData">
<
el-table
-column prop="date" lab
el="Date" width="140" />
<
el-table
-column prop="name" lab
el="Name" width="120" />
<
el-table
-column prop="address" lab
el="Address" />
</
el-table>
</
el-scrollbar>
</
el-main>
</
el-container>
</
el-container>
</template>
<!
---->
<script lang="ts" setup>
import { ref } from 'vue'
import {
Menu as Icon
Menu, Message, Setting } from '@
element
-plus/icons
-vue'
const item = {
date: '2016
-05
-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Ang
eles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>
<style scoped>
.layout
-container
-demo .
el-header {
position: r
elative;
background
-color: var(
--el-color
-primary
-light
-7);
color: var(
--el-text
-color
-primary);
}
.layout
-container
-demo .
el-aside {
color: var(
--el-text
-color
-primary);
background: var(
--el-color
-primary
-light
-8);
}
.layout
-container
-demo .
el-menu {
border
-right: none;
}
.layout
-container
-demo .
el-main {
padding: 0;
}
.layout
-container
-demo .toolbar {
display: inline
-flex;
align
-items: center;
justify
-content: center;
height: 100%;
right: 20px;
}
</style>
idea运行以上代码
报错了该如何解决
扫一扫
1114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
