实践 | Element UI + Vue 管理系统首页
小小上一篇推荐了几个超牛逼的公众号，这次将会回归实践，进入本周的第一篇，本周第一篇将会是Element UI + Vue 制作相关的Tab切换。核心知识点关于 v-show属性的相关使用...
·
小小上一篇推荐了几个超牛逼的公众号，这次将会回归实践，进入本周的第一篇，本周第一篇将会是Element UI + Vue 制作相关的Tab切换。
核心知识点
关于 v-show属性的相关使用
大致效果图
其中上方文头部导航，左边为菜单选项，中间为index页面。
前提
前提需要阅读上一篇，使用Vue UI 方式创建 Hello World Vue 项目。
教程
进行组件化
新建目录如下，新建文件如下
其中分为两个文件夹，一个为views文件夹，一个为components文件夹，一个存放相关文件页面信息，一个存放相关的组件信息。
创建相关的url
创建相关的页面url 在router目录下新建相关的文件， 代码如下
{
path: '/index',
name: 'index',
component: () => import('../views/Index')
},
index页面组件信息
index页面相关代码文件如下
<template>
<div>
<BoxHeader :msg="msg"></BoxHeader>
<div>
<el-container>
<Menum></Menum>
<BoxIndex v-show="cur==0"></BoxIndex>
<HelloWorld v-show="cur==1"></HelloWorld>
</el-container>
</div>
</div>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
}
.el-aside {
color: #333;
}
</style>
<script>
import Menum from "../components/Menum";
import BoxIndex from "../components/BoxIndex";
import BoxHeader from "../components/BoxHeader";
import HelloWorld from "../components/HelloWorld";
export default {
components: {
Menum,
BoxIndex,
BoxHeader,
HelloWorld
},
data() {
return {
msg: 'https://www.iming.info/',
cur: 1
}
}
}
</script>
其中把三个组件进行相关的注册，注册到页面中。这三个组件分别为BoxHeader，BoxIndex，Menum文件，对这三个文件进行相关的注册。
头部文件
进入头部文件，这里对头部文件进行代码，书写，代码如下
<template>
<div class="text1">
<a href="http://localhost:8080/logout" class="text1">退出</a>
</div>
</template>
<script>
export default {
name: 'BoxHeader',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
.text1 {
text-align: right;
padding: 10px;
font-size: 20px;
}
.text1 a{
text-decoration: none;
}
</style>
菜单文件
菜单文件代码如下。并添加相关的事件绑定，确保能够菜单伸缩。
<template>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title">保险产品管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">保险产品查询</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">用户管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">封号管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">问答管理</template>
<el-menu-item-group>
<el-menu-item index="3-1">问题管理</el-menu-item>
<el-menu-item index="3-2">回答管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template slot="title">数据统计</template>
<el-menu-item-group>
<el-menu-item index="4-1">保险产品数据</el-menu-item>
<el-menu-item index="4-2">保险公司数据</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
</template>
<script>
export default {
name: 'Menum',
methods: {
ming(){
console.log("3333");
}
}
}
</script>
上方使用的是Element Ui 框架实现
主页文件
这里主页文件为几个简单的主页文件。一个为示例，一个为主页，代码分别如下
<template>
<el-container>
<el-header>
<el-dropdown>
<i></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>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
进行事件绑定
这里由于跨两个组件，所以进行事件绑定，当子组件触发事件以后，先调用子组件的方法，再通过相关参数，调用父组件的方法，通过调用父组件的方法，实现更改父组件页面的值。
具体流程如下
父组件创建相关方法，并绑定事件
创建相关方法
methods: {
changeData(){
console.log(444444);
this.cur = 1;
}
}
绑定相关事件
<Menum @callFather="changeData"></Menum>
子组件创建相关方法并调用
ming(){
console.log("3333");
this.$emit("callFather");
}
子组件创建相关方法并完成方法绑定
<el-menu-item-group>
<el-menu-item index="1-1" v-on:click="ming">保险产品查询</el-menu-item>
</el-menu-item-group>
子组件全部代码如下
<template>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title">保险产品管理</template>
<el-menu-item-group>
<el-menu-item index="1-1" v-on:click="ming">保险产品查询</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">用户管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">封号管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">问答管理</template>
<el-menu-item-group>
<el-menu-item index="3-1">问题管理</el-menu-item>
<el-menu-item index="3-2">回答管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template slot="title">数据统计</template>
<el-menu-item-group>
<el-menu-item index="4-1">保险产品数据</el-menu-item>
<el-menu-item index="4-2">保险公司数据</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
</template>
<script>
export default {
name: 'Menum',
methods: {
ming(){
console.log("3333");
this.$emit("callFather");
}
}
}
</script>
父组件全部代码如下
<template>
<div>
<BoxHeader :msg="msg"></BoxHeader>
<div>
<el-container>
<Menum @callFather="changeData"></Menum>
<BoxIndex v-show="cur==0"></BoxIndex>
<HelloWorld v-show="cur==1"></HelloWorld>
</el-container>
</div>
</div>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
}
.el-aside {
color: #333;
}
</style>
<script>
import Menum from "../components/Menum";
import BoxIndex from "../components/BoxIndex";
import BoxHeader from "../components/BoxHeader";
import HelloWorld from "../components/HelloWorld";
export default {
components: {
Menum,
BoxIndex,
BoxHeader,
HelloWorld
},
data() {
return {
msg: 'https://www.iming.info/',
cur: 0
}
},
methods: {
changeData(){
console.log(444444);
this.cur = 1;
}
}
}
</script>
完成效果图
前
后
小明菜市场
推荐阅读
● 实战 | GitLab + Docker 实现多环境部署
● 应用 | Redis实现 主从，单例，集群，哨兵，配置应用
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)