【Vue基础】Element案例学习-智能学习辅助系统

林月明

已于 2023-05-17 17:12:40 修改

阅读量889

点赞数

文章标签：学习

于 2023-05-17 17:11:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42294095/article/details/130729989

版权

一、效果展示

初步设计一个系统，有目录、搜索栏、表格操作等。

二、参考代码

主要关注上图“App.vue”和“BtestView.vue”两个文件的代码

1、App.vue

<template>
  <div >
    <!-- <h1>{
  { message }}</h1> -->
    <!-- <element-view></element-view> -->
    <!--<emp-view></emp-view>-->
    <Btest-view></Btest-view>
  </div>
</template>

<script>
//import empView from './views/systemTest/empView.vue'
import BtestView from './views/systemTest/BtestView.vue'
//import ElementView from './views/element/ElementView.vue'
export default {
  //components: { empView },
  //components: { ElementView },
  components: { BtestView },
  data() {
    return {
      message: "Hello world!" 
    }
  },
  methods: {
    
  }
}
</script>

<style>

</style>

2、BtestView.vue

<template>
    <div>
        <el-container style="height: 800px; border: 1px solid #eee">
            <el-header style="font-size: 40px;background-color: rgb(238, 241, 246)">智能学习辅助系统</el-header>

            <el-container>
                <el-aside width="230px" style=" border: 1px solid #eee">
                    <!-- 目录</el-aside> -->
                    <!-- <br> -->
                    <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class&