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

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

  • 一 . ElementUI 基本使用
    • 1.1 Element 介绍
    • 1.2 Element 快速入门
    • 1.3 基础布局
    • 1.4 容器布局
    • 1.5 表单组件
    • 1.6 表格组件
      • 1.6.1 基础表格
      • 1.6.2 带斑马纹表格
      • 1.6.3 带边框表格
      • 1.6.4 带状态的表格
    • 1.7 导航栏组件讲解
  • 二 . 学生列表界面案例
    • 2.1 顶部栏
    • 2.2 侧边栏
    • 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

<!-- 引入 vue.js -->
<script src="js/vue.js"></script>
<!-- 引入 axios -->
<script src="js/axios-0.18.0.js"></script>

引入 element-ui

<!-- 引入 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>

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

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

<!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

将代码复制到视图中

<!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 分栏 , 可以迅速简便的创建布局

比如我们可以演示一下 :

<!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 将页面分成了头部区域、侧边栏区域、主区域、底部区域

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

我们可以分析几个案例

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

将代码复制到视图中

然后我们引入样式

这样容器布局就生效了

整体代码 :

<!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 这个函数

那整体的代码就在这里了

<!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 属性来定义表格的列名

整体代码如下 :

<!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 的 key3. 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据举例: prop="date" 这里的 date 是下面 vue 中 data 中的 tableData 的 key4. 用 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 属性 , 就可以实现带斑马纹表格的效果

代码如下 :

<!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 的 key3. 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据举例: prop="date" 这里的 date 是下面 Vue 中 data 中的 tableData 的某个 key4. 用 label 属性来定义表格的列名5. stripe 表示斑马状的表格--><el-table:data="tableData"style="width: 100%" stripe><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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 带边框表格

代码如下 :

<!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 的 key3. 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据举例: prop="date" 这里的 date 是下面 Vue 中 data 中的 tableData 的某个 key4. 用 label 属性来定义表格的列名5. border 表示带边框的表格--><el-table:data="tableData"style="width: 100%" border><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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 样式 , 我们也要复制

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

此时就产生效果了

整体代码如下 :

<!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 的 key3. 在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据举例: prop="date" 这里的 date 是下面 Vue 中 data 中的 tableData 的某个 key4. 用 label 属性来定义表格的列名5. border 表示带边框的表格--><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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 属性可以设置不让用户点击

整体代码 :

<!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>

二 . 学生列表界面案例

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

<!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 中的 keytableData:[{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 的具体样式还会有更深入的讲解 .

如果对你有帮助的话 , 还请一键三连~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/424594.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【CSS in Depth 2 精译_031】5.3 Grid 网格布局的两种替代语法

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

Vue生命周期;Vue路由配置;vue网络请求;vue跨域处理

一&#xff0c;Vue生命周期 <template><div > <h1 click"changeText">{{ info }}</h1></div> </template><script> export default {name: HelloWorld,data(){return{info:"介绍组件生命周期"}},methods:{chang…

[000-002-01].第03节:Linux系统下Oracle的安装与使用

2.1.Docker安装Oracle 在CentOS7中使用Docker安装Oracle&#xff1a; 1.安装Docker,详细请参考&#xff1a;https://blog.csdn.net/weixin_43783284/article/details/1211403682.拉取镜像&#xff1a; docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g3.下载…

《OpenCV计算机视觉》—— 图像轮廓检测与绘制

文章目录 一、轮廓的检测二、轮廓的绘制图像轮廓检测与绘制的代码实现 三、轮廓的近似 一、轮廓的检测 轮廓检测是指在包含目标和背景的数字图像中&#xff0c;忽略背景和目标内部的纹理以及噪声干扰的影响&#xff0c;采用一定的技术和方法来实现目标轮廓提取的过程注意:做轮…

linux驱动开发-磁盘管理

目录 一、mount基本语法 二、常见选项 三、常用命令 二 fdisk --磁盘分区工具 fdisk作用 命令格式&#xff1a; 选项 分区示例 查看分区情况 -p 删除分区 -d 新增分区 -n 修改分区类型 —— t 保存之前所有的操作 —— w 在Linux系统中&#xff0c;mount命令是一种…

redis-shake v4全量增量同步redis数据

1 概述 RedisShake是一个用于处理和迁移 Redis 数据的工具&#xff0c;github地址是https://github.com/tair-opensource/RedisShake。它提供以下特性&#xff1a; 1&#xff09;Redis 兼容性&#xff1a; RedisShake 兼容从 2.8 到 7.2 的 Redis 版本&#xff0c;并支持各种部…

Parallels Desktop 20 for Mac中文版发布了?会哪些新功能

Parallels Desktop 20 for Mac 正式发布&#xff0c;完全支持 macOS Sequoia 和 Windows 11 24H2&#xff0c;并且在企业版中引入了全新的管理门户。 据介绍&#xff0c;新版本针对 Windows、macOS 和 Linux 虚拟机进行了大量更新&#xff0c;最大的亮点是全新推出的 Parallels…

微软面向所有用户推出 Xbox Game Pass Standard

2024 年 8 月下旬&#xff0c;微软启动了 Xbox Game Pass Standard 的公开测试&#xff0c;这是其不断发展的 Game Pass 套餐中的一个新层级。几周后的今天&#xff0c;Xbox Game Pass 标准版已向支持地区的所有 Xbox 用户开放。 Xbox Game Pass 标准版每月收费 14.99 美元。以…

[Linux]:进程间通信(上)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Linux学习 贝蒂的主页&#xff1a;Betty’s blog 1. 进程间通信介绍 1.1 进程间通信的概念 进程间通信简称IPC&#xff08;In…

我对 monorepo 的一些思考

我对 monorepo 的一些思考 我对 monorepo 的一些思考 前言它的由来技术选型 管理工具语言与打包调试工具测试框架代码规范与质量控制本地引用与发包替换发包流程Github 相关配置部署 使用手册 功能特性总结如何使用&#xff1f;清除默认的包(可选)模板包介绍 packagesapps 更新…

GPU池化为实现Robotaxi按下快进键

日前&#xff0c;甲子光年智库推出《2022中国Robotaxi行业研究报告&#xff1a;探寻规模化商业落地之路》。Robotaxi&#xff08;无人驾驶出租车&#xff09;是自动驾驶技术发展应用的终极目标之一&#xff0c;新基建下的智慧共享出行将链接贯穿未来数智化生活全场景。 该报告从…

七. 部署YOLOv8检测器-quantization-analysis

目录 前言0. 简述1. 案例运行2. 补充说明3. 量化分析4. 探讨总结下载链接参考 前言 自动驾驶之心推出的 《CUDA与TensorRT部署实战课程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习课程第七章—部署YOLOv8检测器&#xff0c;一起来学习…

C语言:链表

链表是一种常见的基础数据结构&#xff0c;它由一系列节点&#xff08;Node&#xff09;组成。每个节点包含两部分&#xff1a;数据域&#xff08;存储数据&#xff09;和指针域&#xff08;存储下一个节点的地址&#xff09;。链表的特点是元素在内存中不一定连续存储&#xf…

BUUCTF 之Basic 1(BUU LFI COURSE 1)

1、启动靶场&#xff0c;会生成一个URL地址&#xff0c;打开给的URL地址&#xff0c;会看到一个如下界面 可以看到是一个PHP文件&#xff0c;非常的简单&#xff0c;就几行代码&#xff0c;判断一下是否有一个GET的参数&#xff0c;并且是file名字&#xff0c;如果是并且加载&a…

GEE:连续变化检测与分类(Continuous Change Detection and Classification, CCDC)教程

连续变化检测与分类&#xff08;Continuous Change Detection and Classification, CCDC&#xff09;是一种土地变化监测算法&#xff0c;旨在对卫星数据的时间序列进行操作&#xff0c;特别是Landsat数据。CCDC包括两个部分&#xff0c;其一是变化检测算法&#xff08;Change …

python小脚本,实时监测服务器是否宕机状态,并发送到指定群组

一&#xff0c;前言 众所周知&#xff0c;市面上监控软件很多&#xff0c;有Zabbix&#xff0c;Prometheus等&#xff0c;但对于相对简单的功能&#xff0c;需要第一时间发现问题&#xff0c;如服务器宕机&#xff0c;zabbix和Prometheus都需要等几分钟才会报警。 想到最原始…

故障排查:VMware虚拟机网络冲突,导致VPN网络无法正常访问

故障现象 某台windows10系统电脑&#xff0c;远程拨号SSL VPN后&#xff0c;无法正常公司内网。通过排查&#xff0c;发现重启开机&#xff0c;操作系统的默认路由多了一条公司内网的默认路由&#xff0c;但网关不正确。手动删除&#xff0c;重启系统又恢复原样。 排查过程 c…

adb的安装和使用 以及安装Frida 16.0.10+雷电模拟器

.NET兼职社区 .NET兼职社区 .NET兼职社区 1.下载adb Windows版本&#xff1a;https://dl.google.com/android/repository/platform-tools-latest-windows.zip 2.配置adb环境变量 按键windowsr打开运行&#xff0c;输入sysdm.cpl&#xff0c;回车。 高级》环境变量》系统变量》…

OpenCV结构分析与形状描述符(20)计算一个包围给定点集的最小外接圆函数minEnclosingCircle()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 找到一个包围二维点集的最小面积的圆。 该函数使用迭代算法来寻找一个二维点集的最小外接圆。这意味着函数将会通过反复逼近的过程来计算出能够…

多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测

多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测 目录 多维时序 | Matlab基于BO-LSSVM贝叶斯优化最小二乘支持向量机数据多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于BO-LSSVM贝叶斯优化最小二乘支…