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

2024-04-04 14:10:17

小小上一篇推荐了几个超牛逼的公众号，这次将会回归实践，进入本周的第一篇，本周第一篇将会是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>

码农公寓

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

进行组件化

创建相关的url

index页面组件信息

头部文件

菜单文件

主页文件

父组件创建相关方法，并绑定事件

创建相关方法

绑定相关事件

子组件创建相关方法并调用

子组件创建相关方法并完成方法绑定

子组件全部代码如下

父组件全部代码如下

完成效果图

前

后

码农公寓

进行组件化

创建相关的url

index页面组件信息

头部文件

菜单文件

主页文件

父组件创建相关方法，并绑定事件

创建相关方法

绑定相关事件

子组件创建相关方法并调用

子组件创建相关方法并完成方法绑定

子组件全部代码如下

父组件全部代码如下

完成效果图

前

后

相关文章