会员
众包
新闻
博问
闪存
赞助商
HarmonyOS
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
大话人生
博客园
::
首页
::
新随笔
::
联系
::
订阅
::
管理
公告
2-VUE布局
VUE布局
VUE布局-2
vue后台主体框架搭建
1.Home.vue引用Container 布局容器
代码
Home.vue
<template>
<div>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
data(){
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return{
tableData: Array(20).fill(item)
}
}
}
</script>
2.App.vue中只保留个router-view即可
代码
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
3.启动运行看一下效果
cd myfirstvue
npm run serve
Subtopic
4.去掉边框样式
1.在assets文件中写一个gloable.css
代码
gloable.css
html,body,div{
margin: 0;
padding: 0;
}
说明
设置html,body,div的边为0
2.在main.js中引入这个css
代码
main.js
加入
import './assets/gloable.css'
加入后
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/gloable.css'
Vue.config.productionTip = false
Vue.use(ElementUI, {size:"small"});
new Vue({
router,
render: h => h(App)
}).$mount('#app')
5.gloable.css中设置高度样式为100%
加入
html,body{
height: 100%;
}
加入后
html,body,div{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
6.Home.vue中container的高度也设置为100%
修改
修改前
<el-container style="height: 500px; border: 1px solid #eee">
修改后
<el-container style="height:100%; border: 1px solid #eee">
7.表格的数据由20个改成10个
修改
修改前
tableData: Array(20).fill(item)
修改后
tableData: Array(10).fill(item)
8.去掉下面的横向，去掉border
修改前
<el-container style="height:100%; border: 1px solid #eee">
修改后
<el-container style="height:100%;">
10.设置id=app的div上的高度为100%
App.vue中增加代码
<style>
#app{
height:100%;
}
</style>
增加后整体代码
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
#app{
height:100%;
}
</style>
11.在Home.vue中将div的高度也是成百分百
修改前
<div>
修改后
<div style="height: 100%">
12.Home.vue中的el-menu的高度也要设置成百分百
修改前
<el-menu :default-openeds="['1', '3']">
修改后
<el-menu :default-openeds="['1', '3']" style="height:100%">
13.去掉三级菜单的溢出
修改el-side中的overflow为hidder
修改前
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
修改后
<el-aside width="200px" style="background-color: rgb(238, 241, 246); height: 100%; overflow: hidder">
14.el-header增加一个下边
增加代码
border-bottom: 1px solid #ccc
增加后
<el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid #ccc">
15.el-header设置文字居中
设置代码
line-height: 60px
设置后代码
<el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px">
16.最终的Home.vue的代码
<template>
<div style="height: 100%">
<el-container style="height:100%;">
<el-aside width="200px" style="background-color: rgb(238, 241, 246); height: 100%;
overflow: hidder">
<el-menu :default-openeds="['1', '3']" style="height:100%">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid #ccc;
line-height: 60px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
data(){
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return{
tableData: Array(10).fill(item)
}
}
}
</script>
Created With
EdrawMind
posted on
2022-06-05 14:42
大话人生
阅读(
234
) 评论(
0
)
收藏
举报
刷新页面
返回顶部
浙公网安备 33010602011771号