初識Element(1)

元始天尊123發表於2024-10-14

初識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>

相關文章