Element-UI-快速入门（极简教程）_element ui

作者：木道寻08 | 2024-06-21 22:21:14

踩

element ui

+ - [4.1 ElementUI介绍](#41_ElementUI_4)
	- [4.2 常用组件](#42__20)
	- * [4.2.1 Container 布局容器](#421_Container__22)
		* [4.2.2 Dropdown 下拉菜单](#422_Dropdown__80)
		* [4.2.3 NavMenu 导航菜单](#423_NavMenu__95)
		* [4.2.4 Table 表格](#424_Table__122)
		* [4.2.5 Pagination 分页](#425_Pagination__172)
		* [4.2.6 Message 消息提示](#426_Message__199)
		* [4.2.7 Tabs 标签页](#427_Tabs__235)
		* [4.2.8 Form 表单](#428_Form__271)
1
2
3
4
5
6
7
8
9
10

4. ElementUI

4.1 ElementUI介绍

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官网地址：http://element-cn.eleme.io/#/zh-CN

传智健康项目后台系统就是使用ElementUI来构建页面，在页面上引入 js 和 css 文件即可开始使用，如下：

<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

1
2
3
4
5
6

4.2 常用组件

4.2.1 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列

<el-header>：顶栏容器

<el-aside>：侧边栏容器

<el-main>：主要区域容器

<el-footer>：底栏容器

<body>
  <div id="app">
    <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>
  <style>
 .el-header, .el-footer {
 background-color: #B3C0D1;
 color: #333;
 text-align: left;
 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: 590px;
 }
 </style>
</body>
<script>
 new Vue({
 el:'#app'
 });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

4.2.2 Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

<el-dropdown split-button size="small" trigger="click">
  个人中心
  <el-dropdown-menu>
    <el-dropdown-item >退出系统</el-dropdown-item>
    <el-dropdown-item divided>修改密码</el-dropdown-item>
    <el-dropdown-item divided>联系管理员</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

1
2
3
4
5
6
7
8
9

4.2.3 NavMenu 导航菜单

为网站提供导航功能的菜单。

<el-menu>
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item>选项1</el-menu-item>
    <el-menu-item>选项2</el-menu-item>
    <el-menu-item>选项3</el-menu-item>
  </el-submenu>
  <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </template>
    <el-menu-item>选项1</el-menu-item>
    <el-menu-item>选项2</el-menu-item>
    <el-menu-item>选项3</el-menu-item>
  </el-submenu>
</el-menu>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4.2.4 Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

<el-table :data="tableData" stripe>
  <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 label="操作" align="center">
    <!--
 slot-scope：作用域插槽，可以获取表格数据
 scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
 -->
    <template slot-scope="scope">
      <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
      <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
<script>
 new Vue({
 el:'#app',
 data:{
 tableData: [{
 date: '2016-05-02',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1518 弄'
 }, {
 date: '2016-05-04',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1517 弄'
 }, {
 date: '2016-05-01',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1519 弄'
 }]
 },
 methods:{
 handleUpdate(row){
 alert(row.date);
 },
 handleDelete(row){
 alert(row.date);
 }
 }
 });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

4.2.5 Pagination 分页

当数据量过多时，使用分页分解数据。

<!--
 current-change：内置的事件，当前页码改变时会触发，可以获取到改变之后的页码
-->
<el-pagination
 @current-change="handleCurrentChange"
 current-page="5"
 page-size="10"
 layout="total, prev, pager, next, jumper"
 :total="305">
</el-pagination>
<script>
 new Vue({
 el:'#app',
 methods:{
 handleCurrentChange(page){
 alert(page);
 }
 }
 });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4.2.6 Message 消息提示

常用于主动操作后的反馈提示。

<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
<script>
 new Vue({
 el: '#app',
 methods: {
 open1() {
 this.$message('这是一条消息提示');
 },
 open2() {
 this.$message({


### 最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/2099efcde7bc4a06ebdf3809685ab849.webp?x-oss-process=image/format,png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/744417