• 2VUE布局

    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>
  • 相关阅读:
    第01组 Beta冲刺（2/4）
    第01组 Beta冲刺（1/4）
    第01组 Alpha事后诸葛亮
    第01组 Alpha冲刺（4/4）
    第01组 Alpha冲刺（3/4）
    第01组 Alpha冲刺（2/4）
    第01组 Alpha冲刺（1/4）
    提高回顾与个人总结
    软件工程结对作业博客
    软件工程第一次阅读作业
  • 原文地址：https://www.cnblogs.com/jingzaixin/p/16343944.html
Copyright © 2020-2023  润新知