使用Vue和Element UI創建令人印象深刻的管理面板

一、引言

隨着互聯網的普及和各種企業、組織的不斷發展壯大，對於一個高效的管理系統變得越來越重要。如何快速開發一個高質量、美觀、易用的管理後台，是每一個開發者都需要面對的問題。

Vue是一款極易上手的漸進式JavaScript框架，Element UI是一個輕量級組件庫，二者的組合可以非常方便地實現一個高效的管理後台。本文將從如何創建Vue項目開始，逐步介紹如何使用Element UI快速搭建一個令人印象深刻的管理面板。

二、創建Vue項目

首先，我們需要創建一個Vue項目：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

以上代碼是一個最簡單的Vue應用，其中的<template>標籤中包含一個用於路由顯示的<router-view>標籤，這裡先不着重介紹路由的概念。接下來，我們需要在終端中執行以下命令：

npm install vue-cli -g
vue init webpack my-project
cd my-project
npm install

上述命令依次安裝了Vue腳手架工具、使用webpack作為模板創建了一個名為my-project的Vue項目、進入到my-project目錄並安裝了項目所需的依賴包。

三、引入Element UI

接下來，我們需要添加Element UI到我們的項目中，以此來方便地使用其組件庫，進而快速構建管理面板。為此，我們可以在項目根目錄下執行以下命令：

npm i element-ui -S

然後在main.js中全局引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

以上代碼引入了Element UI、使用Element UI的樣式主題、引入了App.vue組件並將其渲染在頁面上。

四、使用Element UI的組件

接下來，我們開始使用Element UI的組件，以方便地構建我們的管理面板。

（一）布局

首先，我們需要對頁面進行布局。Element UI提供了一系列布局組件，如Container、Header、Main、Footer等。我們首先使用<el-container>包裹整個頁面：

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

以上代碼將頁面分為三個區域：頁頭Header、主要內容Main和頁腳Footer。

（二）菜單

接下來，我們可以在Header中添加菜單來控制頁面顯示，具體實現如下：

<template>
  <el-container>
    <el-header>
      <el-menu mode="horizontal" background-color="#333">
        <el-menu-item index="1">Navigation One</el-menu-item>
        <el-menu-item index="2">Navigation Two</el-menu-item>
        <el-menu-item index="3">Navigation Three</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

以上代碼創建了一個水平方向的菜單，這裡只是使用了三個示例項，具體可以根據需求進行替換。

（三）表格

接下來，我們可以在Main中使用Element UI的Table來展示數據，具體如下：

<template>
  <el-container>
    <el-header>
      <el-menu mode="horizontal" background-color="#333">
        <el-menu-item index="1">Navigation One</el-menu-item>
        <el-menu-item index="2">Navigation Two</el-menu-item>
        <el-menu-item index="3">Navigation Three</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="name" label="名稱"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2021-01-01',
        name: 'John Doe',
        address: 'New York'
      }, {
        date: '2021-02-01',
        name: 'Jane Smith',
        address: 'Los Angeles'
      }, {
        date: '2021-03-01',
        name: 'Tom Brown',
        address: 'Chicago'
      }]
    }
  }
};
</script>

以上代碼創建了一個簡單的數據表格，其中使用了<el-table>標籤定義表格，<el-table-column>標籤定義表格的列，<:data>綁定了數據源，<prop>指定了數據源中的字段名稱。

（四）對話框

在表格中，我們可以使用Element UI的Dialog組件來實現各種對話框，如新增、編輯、刪除等操作。具體實現如下：

<template>
  <el-container>
    <el-header>
      <el-menu mode="horizontal" background-color="#333">
        <el-menu-item index="1">Navigation One</el-menu-item>
        <el-menu-item index="2">Navigation Two</el-menu-item>
        <el-menu-item index="3">Navigation Three</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="name" label="名稱"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="{row}">
            <el-button type="primary" size="mini" @click="edit(row)">編輯</el-button>
            <el-button type="danger" size="mini" @click="del(row)">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogVisible">
        <el-form ref="form" :model="form">
          <el-form-item label="名稱">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2021-01-01',
        name: 'John Doe',
        address: 'New York'
      }, {
        date: '2021-02-01',
        name: 'Jane Smith',
        address: 'Los Angeles'
      }, {
        date: '2021-03-01',
        name: 'Tom Brown',
        address: 'Chicago'
      }],
      dialogVisible: false,
      form: {
        name: '',
        address: ''
      }
    }
  },
  methods: {
    edit(row) {
      this.dialogVisible = true
      this.form = Object.assign({}, row)
    },
    save() {
      this.dialogVisible = false
      const index = this.tableData.findIndex(item => item.date === this.form.date)
      if (index !== -1) {
        this.tableData.splice(index, 1, Object.assign({}, this.form))
      } else {
        this.tableData.push(Object.assign({}, this.form))
      }
    },
    del(row) {
      this.tableData.splice(this.tableData.findIndex(item => item.date === row.date), 1)
    }
  }
};
</script>

以上代碼在表格的右側添加了兩個操作按鈕，一個是編輯按鈕，一個是刪除按鈕。當用戶點擊編輯按鈕時，將彈出一個對話框，其中包含了一個表單，用戶可以在表單中修改數據，並且提交保存。具體來說，我們使用<el-dialog>組件定義對話框，使用<el-form>組件定義表單，使用<el-input>組件等來創建表單項。為了實現編輯操作，我們需要將表單數據與具體的數據行綁定，這裡使用了Object.assign()方法來複制數據。

五、視圖效果

經過以上步驟的構建，最終的管理面板如下圖所示：


六、總結

本文簡單介紹了如何使用Vue和Element UI快速搭建一個令人印象深刻的管理面板。特別地，本文重點介紹了如何使用Element UI提供的組件，如Container、Header、Main、Footer、Table、Dialog等實現頁面布局、數據展示和對話框等各種功能。通過學習本文，相信讀者可以更快速、高效地開發各類管理系統。