小小上一篇推荐了几个超牛逼的公众号,这次将会回归实践,进入本周的第一篇,本周第一篇将会是Element UI + Vue 制作相关的Tab切换。

核心知识点

关于 v-show属性的相关使用

大致效果图

实践 | Element UI + Vue 管理系统首页插图
其中上方文头部导航,左边为菜单选项,中间为index页面。

前提

前提需要阅读上一篇,使用Vue UI 方式创建 Hello World Vue 项目。

教程

进行组件化

新建目录如下,新建文件如下
实践 | Element UI + Vue 管理系统首页插图1
其中分为两个文件夹,一个为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>

完成效果图

实践 | Element UI + Vue 管理系统首页插图2

实践 | Element UI + Vue 管理系统首页插图3