使用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等实现页面布局、数据展示和对话框等各种功能。通过学习本文，相信读者可以更快速、高效地开发各类管理系统。