初识Element(1)

初识Element

Element简介

Element UI 是一个基于 Vue 2.0 的桌面端组件库，主要用于构建快速、简洁的用户界面。它由饿了么前端团队开发，
并且开放源代码主要用于构建快速、简洁的用户界面。它由饿了么前端团队开发，并且开放源代码。Element UI
提供了一套丰富的组件和工具，能够帮助开发者快速构建高质量的 Vue 应用

使用说明

主要分为三步:
1.编写视图模型分为三部分以下为最基础的模型,其中export使得文件可以被导入

      <template>

      </template>
      <script>
                export default:{
                   data(){
                      return {

                }
                }
      </script>
      <style>

      </style>

2.在app.vue中导入

<template>
  <div >
      <RouterView>

      </RouterView>
  </div>
</template>
<script>
import { RouterView } from 'vue-router';

 export default{
       components:{
        RouterView
       }

}
</script>

3.将Element的组件添加到页面中以改出来下为本人的一段

<template>
    
<el-container style="height: 900px; border: 1px solid #eee">
  <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">阐教管理系统</el-header>
  <el-container>
    <!-- 边框 -->
    <el-aside width="200px">
      <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>系统信息</template>
        <el-menu-item index="1-1">
           <router-link to="/DepartmentControl" >
                部门管理
           </router-link> 
        
          </el-menu-item>
          <el-menu-item index="1-2">
            <router-link to="/UiControl" >
                员工管理
           </router-link> 

          </el-menu-item>
      </el-submenu>
    </el-menu>

    </el-aside>
    <el-main>
        <!-- 表格 -->
         
        <el-table :data=" tableData">
        
        <el-table-column  type="index" label="序号" width="140">
        </el-table-column>
        <el-table-column prop="name" label="部门名称" width="120">
        </el-table-column>
        <el-table-column prop="datetime" label="最后操作时间">
        </el-table-column>

        <el-table-column label="操作" >
                  <el-button type="primary" size="mini">编辑</el-button>
                  <el-button type="danger" size="mini">删除</el-button>
              </el-table-column>
      </el-table>
       

    </el-main>
</el-container>


</el-container>

</template>