Element UI：初步探索 Vue.js 的高效 UI 框架

加勒比海涛2024-09-16 20:35

Element UI：初步探索 Vue.js 的高效 UI 框架

  • [一 . ElementUI 基本使用](#一 . ElementUI 基本使用)
    • [1.1 Element 介绍](#1.1 Element 介绍)
    • [1.2 Element 快速入门](#1.2 Element 快速入门)
    • [1.3 基础布局](#1.3 基础布局)
    • [1.4 容器布局](#1.4 容器布局)
    • [1.5 表单组件](#1.5 表单组件)
    • [1.6 表格组件](#1.6 表格组件)
      • [1.6.1 基础表格](#1.6.1 基础表格)
      • [1.6.2 带斑马纹表格](#1.6.2 带斑马纹表格)
      • [1.6.3 带边框表格](#1.6.3 带边框表格)
      • [1.6.4 带状态的表格](#1.6.4 带状态的表格)
    • [1.7 导航栏组件讲解](#1.7 导航栏组件讲解)
  • [二 . 学生列表界面案例](#二 . 学生列表界面案例)
    • [2.1 顶部栏](#2.1 顶部栏)
    • [2.2 侧边栏](#2.2 侧边栏)
    • [2.3 主区域](#2.3 主区域)

Element UI 是由饿了么前端团队精心打造，是一个可以在 Vue 2.0 运行的桌面端组件库。它以"优雅"、"直观"、"强大"为设计理念，致力于提供一套完善的解决方案，帮助你快速搭建出稳定、美观的界面。从基础的按钮、输入框到复杂的表格、弹出框，Element UI 几乎涵盖了所有你可能需要的组件。

在本篇文章中，我们将深入探讨 Element UI 的简单实际应用，通过一个学生列表界面案例，展示如何利用 Element UI 的各种组件来构建一个功能完备、布局合理的管理界面。我们将一步步分析从顶部导航栏到侧边菜单，再到主内容区域的实现方法，包括如何处理数据展示、用户交互等关键环节。

如果你觉得此专栏对你有帮助的话 , 还可以订阅一下此专栏
https://blog.csdn.net/m0_53117341/category_12778663.html

一 . ElementUI 基本使用

1.1 Element 介绍

Element 是一个网站快速成型工具 , 是饿了么公司的前端开发团队提供的一套基于 Vue 的网站组件库 .

组件 : 组成网页的组件 , 例如 : 超链接、按钮、图片、表格等等

使用 Element 的前提是必须要有 Vue 的环境 .

这里是 Element 的官网 : https://element.eleme.cn/#/zh-CN

1.2 Element 快速入门

第一步 : 引入 Element 样式文件夹

element-ui.rar

然后将 element-ui 这整个文件夹引入进来

第二步 : 创建 js 文件夹 , 将 vue.js 和 axios.js 导入进来

第三步 : 在 HTML 页面中引入 vue.js、axios.js 以及 element-ui

引入 vue.js 和 axio.js

javascript 复制代码 
<!-- 引入 vue.js -->
<script src="js/vue.js"></script>
<!-- 引入 axios -->
<script src="js/axios-0.18.0.js"></script>

引入 element-ui

html 复制代码 
<!-- 引入 Element-UI 样式 -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

第四步 : 将在线路径修改成本地路径

根据自己路径判断 , 只要定位到这两个文件即可

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 vue.js -->
    <!-- 导入 vue.js 需要优先于 index.js 文件 -->
    <script src="js/vue.js"></script>
    <!-- 引入 element-ui -->
    <script src="js/axios-0.18.0.js"></script>
    <!-- 引入 Element-UI -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!-- 
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
     -->
    <script src="./element-ui/lib/index.js"></script>
</head>
<body>
    
</body>
</html>

那接下来 , 我们就可以复制官网提供给我们的样式了

我们可以选择 Button 进行展示 : https://element.eleme.cn/#/zh-CN/component/button

将代码复制到视图中

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 vue.js -->
    <!-- 导入 vue.js 需要优先于 index.js 文件 -->
    <script src="js/vue.js"></script>
    <!-- 引入 element-ui -->
    <script src="js/axios-0.18.0.js"></script>
    <!-- 引入 Element-UI -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!-- 
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
     -->
    <script src="./element-ui/lib/index.js"></script>
</head>
<body>
    <!-- 视图 -->
    <!-- element 支持响应式: 就是随着屏幕大小变化而变化 -->
    <div id="myDiv">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
          
          <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
          </el-row>
          
          <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </el-row>
          
          <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>
    </div>
</body>

<script>
    // 脚本
    new Vue({
        el: '#myDiv'
    });
</script>
</html>

1.3 基础布局

https://element.eleme.cn/#/zh-CN/component/layout

通过基础的 24 分栏 , 可以迅速简便的创建布局

比如我们可以演示一下 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 vue.js -->
    <!-- 导入 vue.js 需要优先于 index.js 文件 -->
    <script src="js/vue.js"></script>
    <!-- 引入 element-ui -->
    <script src="js/axios-0.18.0.js"></script>
    <!-- 引入 Element-UI -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!-- 
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
     -->
    <script src="./element-ui/lib/index.js"></script>

    <!-- 引入 Element 样式 -->
    <style>
        .el-row {
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        .el-col {
          border-radius: 4px;
        }
        .bg-purple-dark {
          background: #99a9bf;
        }
        .bg-purple {
          background: #d3dce6;
        }
        .bg-purple-light {
          background: #e5e9f2;
        }
        .grid-content {
          border-radius: 4px;
          min-height: 36px;
        }
        .row-bg {
          padding: 10px 0;
          background-color: #f9fafc;
        }
      </style>
</head>
<body>
    <!-- 视图 -->
    <!-- element 支持响应式: 就是随着屏幕大小变化而变化 -->
    <div id="myDiv">
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
    </div>
</body>

<script>
    // 脚本
    new Vue({
        el: '#myDiv'
    });
</script>
</html>

那 Element-UI 要求我们一行最多 24 份 , 如果超过的话就会失效

1.4 容器布局

https://element.eleme.cn/#/zh-CN/component/container

Element-UI 将页面分成了头部区域、侧边栏区域、主区域、底部区域

注意 : 当子元素中包含 或 时 , 全部子元素会垂直上下排列 , 否则会水平左右排列 .

我们可以分析几个案例

我们可以复制最后一个案例的代码 , 来看一下效果

将代码复制到视图中

然后我们引入样式

这样容器布局就生效了

整体代码 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 vue.js -->
    <!-- 导入 vue.js 需要优先于 index.js 文件 -->
    <script src="js/vue.js"></script>
    <!-- 引入 element-ui -->
    <script src="js/axios-0.18.0.js"></script>
    <!-- 引入 Element-UI -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!-- 
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
     -->
    <script src="./element-ui/lib/index.js"></script>

    <!-- 引入 Element 样式 -->
    <style>
        .el-header, .el-footer {
          background-color: #B3C0D1;
          color: #333;
          text-align: center;
          line-height: 60px;
        }
        
        .el-aside {
          background-color: #D3DCE6;
          color: #333;
          text-align: center;
          line-height: 200px;
        }
        
        .el-main {
          background-color: #E9EEF3;
          color: #333;
          text-align: center;
          line-height: 160px;
        }
        
        body > .el-container {
          margin-bottom: 40px;
        }
        
        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
          line-height: 260px;
        }
        
        .el-container:nth-child(7) .el-aside {
          line-height: 320px;
        }
      </style>
</head>
<body>
    <!-- 视图 -->
    <!-- element 支持响应式: 就是随着屏幕大小变化而变化 -->
    <div id="myDiv">
        <!-- 最外层容器: 橙色容器 -->
        <el-container>
            <!-- 橙色容器上半部分: 顶栏容器 -->
            <el-header>Header</el-header>
            <!-- 橙色容器下半部分: 绿色容器 -->
            <el-container>
              <!-- 绿色容器左半部分: 侧边栏容器 -->
              <el-aside width="200px">Aside</el-aside>
              <!-- 绿色容器右半部分: 紫色容器 -->
              <el-container>
                <!-- 紫色容器上半部分: 主要区域容器 -->
                <el-main>Main</el-main>
                <!-- 紫色容器下半部分: 底栏容器 -->
                <el-footer>Footer</el-footer>
              </el-container>
            </el-container>
          </el-container>
    </div>
</body>

<script>
    // 脚本
    new Vue({
        el: '#myDiv'
    });
</script>
</html>

1.5 表单组件

表单组件是由输入框、下拉列表、单选框、多选框等控件组成 , 用以收集、校验、提交数据 .

在 Form 组件中 , 每一个表单域由一个 Form-Item 组件构成 , 表单域中可以放置各种类型的表单控件 , 包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

我们来看一下 Element 官方对表单组件的介绍 : https://element.eleme.cn/#/zh-CN/component/form

我们将表单验证这段代码粘贴到视图中

此时我们查看一下效果 , 目前什么也没有

然后我们继续往下翻阅文档 , 发现下半部分 , 是 Vue 的语法 . 那我们将这段内容继续复制到 Vue 的脚本部分

那我们复制过来之后 , 我们发现有一个位置跟我们之前学习的不同 , 就是数据部分

这是 Element 官方使用的一种方式 , 我们只需要按照他的写法复制即可 .

此时再来看一下效果

而且这个页面是自带校验功能的

那如果我们想要修改页面的内容 , 就需要先来简单的阅读一下代码

:model="ruleForm" 全称写法 : v-bind:model="ruleForm", 给 form 表单绑定一个 model 属性 , 属性值是 ruleForm

:rules="rules" 给 el-form 标签绑定一个 rules 属性, 属性值是下面 Vue 中 data 的 key

那接下来我们展开 , 继续阅读

我们可以修改校验规则

那效果就是这个样子

然后继续往下看

那所有要输入的数据 , 在下面的 Vue 中都一一定义了

然后继续往下 , 我们查看一下立即创建按钮 .

那我们就可以搜索一下 submitForm 这个函数

那整体的代码就在这里了

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 vue.js -->
    <!-- 导入 vue.js 需要优先于 index.js 文件 -->
    <script src="./js/vue.js"></script>
    <!-- 引入 axios -->
    <script src="./js/axios-0.18.0.js"></script>
    <!-- 引入 Element-UI 样式 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!--
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
     -->
    <script src="./element-ui/lib/index.js"></script>
    
    <!-- 引入 Element 样式 -->
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }
        
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
        
        body > .el-container {
            margin-bottom: 40px;
        }
        
        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }
        
        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<!-- 视图 -->
<!-- element 支持响应式: 就是随着屏幕大小变化而变化 -->
<div id='myDiv'>
    <!--
        :model="ruleForm" 全称写法: v-bind:model="ruleForm", 给 form 表单绑定一个 model 属性, 属性值为 ruleForm
        :rules="rules" 全称写法: v-bind:rules="rules", 给 form 表单绑定一个 rules 属性, 属性值是下面 Vue 中 data 的 key
     -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!--
            Form 组件提供了表单验证的功能, 只需要通过 rules 属性传入约定的验证规则, 并将 Form-Item 的 prop 属性设置为需要校验的字段名即可
            <el-form-item label="活动名称" prop="name"> prop 的属性值为 name, name 是下面 data 中的 rules 中的校验规则中的 key, 表示当前输入框需要进行校验
         -->
        <el-form-item label="活动名称" prop="name">
            <!--
                v-model="ruleForm.name" 是双向数据绑定, 视图改变数据随之改变; 数据改变视图随之改变
                ruleForm.name 表示在下面的 Vue 中的 data 中, 有一个 key 叫做 ruleForm
                当用户输入数据之后, 就自动会构造出 key 为 ruleForm.name, value 为用户输入的值 这样的键值对
             -->
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker placeholder="选择时间" v-model="ruleForm.date2"
                                    style="width: 100%;"></el-time-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <!--
                @click="submitForm('ruleForm')" 表示给当前按钮绑定一个单击事件, 全称 v-on:click="submitForm('ruleForm')"
                单击立即创建按钮就会调用下面 Vue 中的函数 submitForm, 将上面的表单传递到函数 submitForm 中
             -->
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    new Vue({
        el: '#myDiv',
        // Vue 中存储的数据
        // 之前的写法
        // data: {
        //     key1: value1,
        //     key2: value2
        // },
        // ElementUI 写法: 将 data 作为了一个函数
        data() {
            return {
                ruleForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    region: [
                        {required: true, message: '请选择活动区域', trigger: 'change'}
                    ],
                    date1: [
                        {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    date2: [
                        {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
                    ],
                    type: [
                        {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
                    ],
                    resource: [
                        {required: true, message: '请选择活动资源', trigger: 'change'}
                    ],
                    desc: [
                        {required: true, message: '请填写活动形式', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) { // formName 就是整个表单数据
                // 进行校验
                // 如果 valid 的值为 true, 表示表单校验通过可以提交表单, 否则不能提交
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 可以提交表单
                        alert('submit!');
                        // 这里省略了 return true;
                        // return true;
                    } else {
                        // 不可以提交表单
                        console.log('error submit!!');
                        // 组织表单提交
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>
</html>

小结 :

1.6 表格组件

https://element.eleme.cn/#/zh-CN/component/table

我们先来看一下基础表格

1.6.1 基础表格

我们先来看一下页面效果

那目前还没有数据 , 我们可以准备一些初始数据

那页面上的数据 , 目前是写死的 . 在开发中肯定不能这样写 , 需要我们先将这部分初始化成空

我们先还原回来默认数据 , 方便后续效果的演示

然后我们看一下官方给我们的提示

我们来根据例子看一下

在 el-table 标签的属性 data 的属性值 tableData 中, 是下面 vue 中 data 的 key

在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据

用 label 属性来定义表格的列名

整体代码如下 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入 vue.js -->
  <!-- 导入 vue.js 需要优先于 index.js 文件 -->
  <script src="js/vue.js"></script>
  <!-- 引入 element-ui -->
  <script src="js/axios-0.18.0.js"></script>
  <!-- 引入 Element-UI -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
  <!-- 
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
  -->
  <script src="./element-ui/lib/index.js"></script>

</head>

<body>
  <!-- 视图 -->
  <!-- element 支持响应式: 就是随着屏幕大小变化而变化 -->
  <div id="myDiv">
    <!-- 
      当 el-table 元素中注入 data 对象数组后, 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据,
      用 label 属性来定义表格的列名. 可以使用 width 属性来定义列宽
      1. 使用 el-table 表示表格
      2. 在 el-table 标签的属性 data 的属性值 tableData 中, 是下面 vue 中 data 的 key
      3. 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据
         举例: prop="date" 这里的 date 是下面 vue 中 data 中的 tableData 的 key
      4. 用 label 属性来定义表格的列名
     -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</body>

<script>
  // 脚本
  new Vue({
    // 作用的视图
    el: '#myDiv',
    data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
  });
</script>

</html>

1.6.2 带斑马纹表格

这也就意味着 , 我们只需要在 el-table 标签内增加一个 stripe 属性 , 就可以实现带斑马纹表格的效果

代码如下 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 vue.js -->
    <!-- 导入 vue.js 需要优先于 index.js 文件 -->
    <script src="./js/vue.js"></script>
    <!-- 引入 axios -->
    <script src="./js/axios-0.18.0.js"></script>
    <!-- 引入 Element-UI 样式 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!--
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
     -->
    <script src="./element-ui/lib/index.js"></script>
</head>
<body>
<!-- 视图 -->
<div id='myDiv'>
    <!--
        当 el-table 元素中注入 data 对象数组后, 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据
        用 label 属性来定义表格的列名, 可以使用 width 属性来定义列宽
        1. 使用 el-table 表示表格
        2. 在 el-table 标签的属性 data 的属性值 tableData 中, 是下面 Vue 中 data 的 key
        3. 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据
            举例: prop="date" 这里的 date 是下面 Vue 中 data 中的 tableData 的某个 key
        4. 用 label 属性来定义表格的列名
        5. stripe 表示斑马状的表格
     -->
    <el-table
            :data="tableData"
            style="width: 100%" stripe>
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    new Vue({
        el: '#myDiv',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    });
</script>
</html>

1.6.3 带边框表格

代码如下 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 vue.js -->
    <!-- 导入 vue.js 需要优先于 index.js 文件 -->
    <script src="./js/vue.js"></script>
    <!-- 引入 axios -->
    <script src="./js/axios-0.18.0.js"></script>
    <!-- 引入 Element-UI 样式 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!--
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
     -->
    <script src="./element-ui/lib/index.js"></script>
</head>
<body>
<!-- 视图 -->
<div id='myDiv'>
    <!--
        当 el-table 元素中注入 data 对象数组后, 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据
        用 label 属性来定义表格的列名, 可以使用 width 属性来定义列宽
        1. 使用 el-table 表示表格
        2. 在 el-table 标签的属性 data 的属性值 tableData 中, 是下面 Vue 中 data 的 key
        3. 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据
            举例: prop="date" 这里的 date 是下面 Vue 中 data 中的 tableData 的某个 key
        4. 用 label 属性来定义表格的列名
        5. border 表示带边框的表格
     -->
    <el-table
            :data="tableData"
            style="width: 100%" border>
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    new Vue({
        el: '#myDiv',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    });
</script>
</html>

1.6.4 带状态的表格

注意: 带状态的表格不能跟带斑马纹表格一起使用

那他下面还有 CSS 样式 , 我们也要复制

那官网下面还有内容 , 我们还需要引入到我们的页面中

此时就产生效果了

整体代码如下 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 vue.js -->
    <!-- 导入 vue.js 需要优先于 index.js 文件 -->
    <script src="./js/vue.js"></script>
    <!-- 引入 axios -->
    <script src="./js/axios-0.18.0.js"></script>
    <!-- 引入 Element-UI 样式 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!--
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
     -->
    <script src="./element-ui/lib/index.js"></script>
    
    <!-- 引入带状态表格的样式 -->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }
        
        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<!-- 视图 -->
<div id='myDiv'>
    <!--
        当 el-table 元素中注入 data 对象数组后, 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据
        用 label 属性来定义表格的列名, 可以使用 width 属性来定义列宽
        1. 使用 el-table 表示表格
        2. 在 el-table 标签的属性 data 的属性值 tableData 中, 是下面 Vue 中 data 的 key
        3. 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据
            举例: prop="date" 这里的 date 是下面 Vue 中 data 中的 tableData 的某个 key
        4. 用 label 属性来定义表格的列名
        5. border 表示带边框的表格
     -->
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    new Vue({
        el: '#myDiv',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods: {
            // 指定某行表格的状态
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        }
    });
</script>
</html>

1.7 导航栏组件讲解

https://element.eleme.cn/#/zh-CN/component/menu

我们先将视图复制下来

然后接下来复制脚本部分

这是因为我们复制出了两份 , 我们删下去白色的

我们可以看一下官方对于导航栏组件的解释

导航菜单默认为垂直模式 , 通过 mode 属性可以使导航菜单变更为水平模式

我们可以删除掉看一下效果 , 但是非常丑

我们还可以设置 mode 属性值为 vertical 来设置垂直显示 (上下展示)

但实际上样式跟刚才一样

在菜单中通过 submenu 组件可以生成二级菜单

此时看一下效果

Menu 还提供了 background-color、text-color 和 active-text-color, 分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色

通过设置 disabled 属性可以设置不让用户点击

整体代码 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入 vue.js -->
  <!-- 导入 vue.js 需要优先于 index.js 文件 -->
  <script src="js/vue.js"></script>
  <!-- 引入 element-ui -->
  <script src="js/axios-0.18.0.js"></script>
  <!-- 引入 Element-UI -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
  <!-- 
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
  -->
  <script src="./element-ui/lib/index.js"></script>
</head>

<body>
  <!-- 视图 -->
  <!-- element 支持响应式: 就是随着屏幕大小变化而变化 -->
  <div id="myDiv">
    <!-- 
      1. 导航菜单默认为垂直模式, 通过设置 mode 属性为 horizontal 可以使导航菜单变更为水平模式
      我们还可以设置 mode 属性值为 vertical 来设置垂直显示
      2. 另外, 在菜单中通过 submenu 组件可以生成二级菜单
      3. Menu 还提供了 
        background-color、设置菜单的背景色
        text-color、菜单的文字颜色
        active-text-color、当前激活菜单的文字颜色, 具体指的就是当前处于哪个位置的字体颜色
     -->
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">用户管理</el-menu-item>
        <el-menu-item index="2-2">商品管理</el-menu-item>
        <el-menu-item index="2-3">订单管理</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">平台管理</template>
          <el-menu-item index="2-4-1">点赞管理</el-menu-item>
          <el-menu-item index="2-4-2">评论管理</el-menu-item>
          <el-menu-item index="2-4-3">关注管理</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
  </div>
</body>

<script>
  // 脚本
  new Vue({
    // 作用的视图
    el: '#myDiv',
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  });
</script>

</html>

二 . 学生列表界面案例

我们直接将写好的代码发给大家 , 然后我们一点一点来分析

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入 vue.js -->
  <!-- 导入 vue.js 需要优先于 index.js 文件 -->
  <script src="js/vue.js"></script>
  <!-- 引入 element-ui -->
  <script src="js/axios-0.18.0.js"></script>
  <!-- 引入 Element-UI -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
  <!-- 
        引入组件库
        index.js 是饿了么团队编写的 js 代码, 底层依赖 vue, 所以在导入 index.js 文件之前必须先导入 vue 核心库
  -->
  <script src="./element-ui/lib/index.js"></script>

  <!-- 引入 CSS 样式 -->
  <style>
    .el-header {
      background-color: #545c64;
    }

    .header-img {
      width: 50px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div id="myDiv">
    <!-- 页面框架 -->
    <el-container>
      <!-- 头部 -->
      <el-header class="el-header">
        <el-container>
          <div>
            <!-- 顶栏左边的图片 -->
            <el-image src="../material/三只松鼠.png" class="header-img"></el-image>
          </div>
          <!-- 
            顶部导航栏
            mode="horizontal": 水平显示
           -->
          <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="#545c64"
            text-color="white" active-text-color="#ffd04b" style="margin-left: auto;">
            <el-menu-item index="1">处理中心</el-menu-item>
            <!-- el-submenu 表示二级菜单  -->
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="http://www.baidu.com" target="_self">首页</a></el-menu-item>
          </el-menu>
        </el-container>
      </el-header>

      <el-container style="height: 580px; border: 1px solid #eee">
        <!-- 侧边栏区域 -->
        <el-container>
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <!-- 
                :default-openeds 表示默认展开项, 值是下面 <el-submenu index="1"> 的 index 值, 是几就会默认展开几
                例如：
                  :default-openeds="['1']" 那么就会默认展开 学工部
                  :default-openeds="['2']" 那么就会默认展开 咨询部
            -->
            <!-- 这里默认展开 2, 也就是咨询部 -->
            <el-menu :default-openeds="['2']">
              <el-submenu index="1">
                <template slot="title"><i class="el-icon-menu"></i>学工部</template>
                <el-menu-item-group>
                  <el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
                  <el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
                  <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>咨询部</template>
                <el-menu-item-group>
                  <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
                  <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
                  <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title"><i class="el-icon-menu"></i>教研部</template>
                <el-menu-item-group>
                  <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
                  <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
                  <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
        </el-container>
        

        <!-- 主区域 -->
        <el-container>
          <el-main>
            <b style="color: red;font-size: 20px;">学生列表</b>
            <!-- 按钮 -->
            <div style="float:right">
              <el-button type="primary">添加学生</el-button>
            </div>

            <!-- 
                1. el-table 标签通过 :data="tableData" 向表格填充数据, tableData 是下面 vue 中 data 中的 key
                    tableData:[
                      {
                        date:"2088-08-08",
                        name:"张三",
                        address:"北京市昌平区"
                      },{
                        date:"2088-08-08",
                        name:"李四",
                        address:"北京市昌平区"
                      },{
                        date:"2088-08-08",
                        name:"王五",
                        address:"北京市昌平区"
                      },
                    ]
                2. <el-table-column prop="date" label="日期" width="180"> 属性 prop="date" 的属性 date 需要和 tableData 中的 key 一致
                3. label="日期" 是表格的列名
             -->
            <el-table :data="tableData" style="width: 100%;">
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址">
              </el-table-column>
              <el-table-column label="操作" width="180">
                <!-- type="warning" 表示警告颜色 -->
                <el-button type="success">编辑</el-button>
                <el-button type="warning">删除</el-button>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</body>

<script>
  // 脚本
  new Vue({
    // 作用的视图
    el: '#myDiv',
    data: {
      tableData: [
        {
          date: "2088-08-08",
          name: "张三",
          address: "北京市昌平区"
        }, {
          date: "2088-08-08",
          name: "李四",
          address: "北京市昌平区"
        }, {
          date: "2088-08-08",
          name: "王五",
          address: "北京市昌平区"
        },
      ]
    }
  });
</script>

</html>

2.1 顶部栏

我们先来观察一下页面结构

页面采用的是这种结构

其中 , 侧边栏区域和主要函数区域在同一排 , 我们需要用不同的容器对象分隔开

那我们接下来先分析头部区域

首先 , 页面左上角引入了一张图片 , 那我们就创建一个 div 标签存储图片

然后接下来右侧部分我们使用刚才讲到的导航栏组件即可

那这个图片和标签栏应该是同一个顶部容器中的 , 所以我们需要用 el-container 包括起来

不然就会是这个效果

2.2 侧边栏

我们还可以使用导航栏组件 , 只不过不设置 mode="horizontal": 水平显示属性即可

那这里用到了一个功能 : 导航栏默认展开功能

在 标签中添加 :default-openeds 属性 , 然后指定某个部分所对应的 index 值即可

2.3 主区域

我们首先指定一段文字提示以及一个按钮样式

然后接下来就可以引入表格样式了

在表格样式中 , 我们可以指定按钮的颜色

那其实页面实际上分为了上下部分 , 上一部分是头部区域 , 下一部分是 "侧边栏 + 主要区域" , 所以应该将 "侧边栏 + 主要区域" 放到一个容器中

推荐每一部分都添加一个容器

我们先对 ElementUI 的介绍就到这里 , 后续对 ElementUI 的具体样式还会有更深入的讲解 .

如果对你有帮助的话 , 还请一键三连~

相关推荐
诗书画唱几秒前
【前端面试题】JavaScript 核心知识点解析（第二十二题到第六十一题）
开发语言·前端·javascript
excel7 分钟前
前端必备：从能力检测到 UA-CH，浏览器客户端检测的完整指南
前端
前端小巷子14 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构21 分钟前
我的网站被攻击了，被干掉了 120G 流量，还在持续攻击中...
java·前端·架构
CodeSheep22 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss26 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录，不报错问题！
前端·vue.js
遗悲风27 分钟前
html二次作业
前端·html
江城开朗的豌豆30 分钟前
React输入框优化：如何精准获取用户输入完成后的最终值？
前端·javascript·全栈
CF14年老兵30 分钟前
从卡顿到飞驰：我是如何用WebAssembly引爆React性能的
前端·react.js·trae
画月的亮34 分钟前
前端处理导出PDF。Vue导出pdf
前端·vue.js·pdf
热门推荐
01UV安装并设置国内源02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04KGG转MP3工具|非KGM文件|解密音频052025最新国内服务器可用docker源仓库地址大全（2025年8月更新）06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10TRAE Rules 实践：为项目配置 6A 工作流