Element

宫阙

一、概述

Element UI是一款基于Vue.js 2.0的桌面端组件库，由饿了么前端团队开发和维护，提供了丰富的UI组件，包括表单、数据展示、弹框、导航、布局等。Element UI的设计风格简约大方，易于上手，同时提供了丰富的主题和定制选项。在开发过程中，Element UI不仅可以提高开发效率，更能够让开发者快速搭建高质量的Web应用程序。

Element UI 的典型特点包括：

丰富的组件库： Element UI 提供了完整而强大的组件库，包括表格、表单、对话框、菜单、按钮等常见的组件。
灵活的自定义：Element UI 组件具有高度可定制性，在保持默认外观的前提下，可以通过 CSS、主题等来自定义组件样式，同时也支持按需加载。
响应式设计：Element UI 的所有组件都是基于响应式的设计，自动适应不同设备的屏幕大小，提供一致的用户体验。
易于使用：Element UI 的组件封装简单，开发人员可以轻松地在 Vue.js 应用程序中使用。

二、引入Element ui

1、引入方式

1）cdn引入

vue.js应放到index.js之前，否则报错

2）css/js引入

三、element元素的用法

1、表单组件

https:// element.eleme.cn/# /zh-CN/component/form 更多资料请参考官网

表单元素：

el-row，el-col 和 el-form：

1）el-row

<el-row type="flex" class="row-bg" justify="center">

type 属性指定了布局类型，此处使用的是弹性布局，也可以使用其他布局方式（如 grid）。
class 属性用于指定额外的 CSS 样式类，此处使用的是 row-bg 类，用于设置行的背景颜色。row-bg 类需要在 CSS 文件中定义。
justify 属性指定对齐方式，此处使用的是对齐中心（center）。

2）el-col

<el-col :span="8">

:span 属性指定了此列的宽度，此处使用 8 的宽度，即占据了布局的1/3。
span 属性可以动态绑定数据，这里使用了动态数据绑定将 span 属性的值指定为 8，实现自适应的布局。

3）el-form

<el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

:model 属性绑定了 Vue 实例中的数据对象 user。这意味着表单中的输入元素值会自动与 user 对象中的数据属性进行双向绑定，实现数据同步更新。
:rules 属性绑定了 Vue 实例中的规则对象 rules，用于表单验证。在此表单中，输入框中的数据会被检查是否符合定义的验证规则，并在检查不通过时提示错误信息。ref 属性为表单组件命名为 ruleForm，用来在 Vue 实例中通过 $refs.ruleForm 访问组件实例。label-width 属性设置标签的宽度为 100px，这是一个用于控制表单标签尺寸和位置的属性。class 属性用于为表单组件设置额外的 CSS 样式类，此处使用 demo-ruleForm，这个样式类可以根据需要在 CSS 文件中定义。
:model="user"：指定属性 model 的值为构建表单的数据对象 user。这意味着 user 中的数据将与表单元素值之间建立双向绑定，一旦通过

更改了数据对象或表单元素的值，双方的值都会同步更新。:model 属性中的冒号表示这是一个动态属性，值需要从 Vue 实例中的 ruleForm 数据对象获取。

:rules="rules"：指定属性 rules 的值为一个验证规则对象。这个规则对象描述了表单的验证条件，以保证表单输入正确、完整和符合要求。

:rules 属性中的冒号同样表示这是一个动态属性，值需要从 Vue 实例中的 rules 数据对象获取。

ref="ruleForm"：定义引用名称为 ruleForm，可以在组件外部使用 Vue 实例的 $refs 属性来访问此组件的引用实例。例如，可以使 this.$refs.ruleForm.validate() 来触发组件中 el-form 对象的验证功能。
label-width="100px"：指定 el-form 中的 label 的宽度，这是一个指定表单字段标签的宽度的关键属性。
class="demo-ruleForm"：指定 class 属性为 demo-ruleForm，这是一个 CSS 类名，用于控制 el-form 组件的样式。

4）el-form-item&el-button

<el-form-item label="登录名:" prop="name">

el-form-item 是 Element UI 中的表单项组件，用于代表一个表单输入项。其中 label 属性用于指定表单标签文字，prop 属性指定表单项对应的数据对象属性名，这两个属性都是必选项。
label 属性的值为"登录名"，会在表单组件中自动渲染为带标签的文本。
prop 属性的值为 "name"，代表了表单组件中该输入框的输入值将会被存储在 Vue 实例中 user 对象的 name 属性中。

<el-input v-model="user.name"></el-input>

el-input 是 Element UI 提供的基础输入组件，可以支持文本、邮箱、密码等不同类型的输入。这里就是一个简单的文本框。
v-model 指令将表单输入框的值与 Vue 实例中的 user.name 数据对象进行双向绑定，这样在表单输入框中输入的数据就能够自动地更新到 user.name 中，同时

user.name 也可以通过更新来改变表单输入框中的初始值。

<el-input type="password" v-model="user.password" autocomplete="off" show-password></el-input>

autocomplete：指定输入框关闭浏览器自动完成功能，这里设置为 off。
show-password：指定输入框的类型为密码，并且显示密码控制图标。

综合来看，该代码段使用了 Element UI 的布局组件和来实现了一个简单的表单布局，并使用 Element UI 的表单组件和 el-form-item 来定义表单项。同时，在表单项中使用了 Element UI 的输入组件完成对数据的输入和展示，同时借助 Vue.js 的数据绑定机制，实现了表单数据与界面数据的自动双向绑定和同步更新。

<el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item>

el-form-item：表单项组件，它用于包装表单中的输入控件（input、select等），并提供表单元素的状态验证和反馈功能。
el-button：按钮组件，在表单中通常用于提交或者重置表单。
type：按钮类型属性，会影响按钮的样式以及功能，如：type="primary"表示主要的操作按钮，type="warning"表示警告按钮等。
@click：Vue.js中的事件绑定符号，表示绑定一个点击事件，当按钮被点击时执行绑定的函数。
submitForm('ruleForm')：调用submitForm()方法来提交表单，其中ruleForm是表单的名称。
resetForm('ruleForm')：调用resetForm()方法来重置表单，其中ruleForm是表单的名称。

当用户在一个登录表单中输入了用户名和密码，并点击"登录"按钮，submitForm('ruleForm')方法会被调用，将用户名和密码以表单的形式提交到后台进行验证；当用户需要重新输入时，点击"重置"按钮，resetForm('ruleForm')方法会被调用，将输入框重置为空。

5）el-table-column

<el-table-column label="性别" width="180"> <template slot-scope="scope"> <el-tag v-if="scope.row.gender">男</el-tag> <el-tag v-else type="success">女</el-tag> </template> </el-table-column>

这段代码是Vue.js框架中用于展示表格数据的一部分，其中包含表格列组件(el-table-column)和插槽(template)。下面对每个属性进行详细解释：

label：表格列显示的标题文本，例如此处的"性别"。
width：表格列的宽度大小，例如此处的"180"，表示该列的宽度为"180px"。
template：插槽组件，用于渲染图标、按钮等自定义的组件。
slot-scope="scope"：得到每一行的数据(row)，并将scope作为参数传递给插槽，可以在插槽中访问该行的所有数据。
el-tag：标记组件，用于展示一些简单的文字或者图标。
v-if：Vue.js中条件渲染的指令，根据其后的表达式的真假来确定是否渲染该组件。
v-else：Vue.js中条件渲染的指令，根据其前面的指令是否为真来确定是否渲染该组件。

对于"性别"这一列，如果数据源中的gender属性为true（即男性），则会渲染一个"男"的标记组件，反之（即女性）则会渲染一个类别为"success"的"女"标记组件。这样，方便用户通过可视化的方式直观地了解数据内容。

6）el-radio

<el-form-item label="性别"> <el-radio v-model="emp4Edit.gender" :label="true">男</el-radio> <el-radio v-model="emp4Edit.gender" :label="false">女</el-radio> </el-form-item>

单选框组件（el-radio）

el-radio：单选框组件，用户可以从N个选项中选择一个，通常用于用户选择单个选项的场景。
v-model：指定该单选框组件的值，相当于选中单选框时的返回值。
:label：单选框组件的值，例如true或false，这个值与v-model绑定，表明当选中单选框时，v-model将会被赋值。

在一个员工信息的表单中，性别项使用两个单选框渲染，当用户点击"男"的单选框时，v-model="emp4Edit.gender"的值将被改为"true"，相应地，当点击"女"的单选框时，v-model="emp4Edit.gender"的值将被改为"false"。而这个值将会在表单提交时被提交。

7）el-select

<el-form-item label="所属部门" > <el-select v-model="emp4Edit.depId"> <el-option v-for="(dep, index) in deps" :key="index" :label="dep.name" :value="dep.id"></el-option> </el-select> </el-form-item>

下拉框组件（el-select）

el-select：下拉框组件，用于从N个选项中选择一个，通常用于用户需要从多个选项中选择一个的场景。
v-model：指定该下拉框组件当前选中的值，相当于选中选项时的返回值。
el-option：下拉框选项组件，用于提供下拉框中的每个选项，可以使用 v-for 指令来动态生成选项。
v-for：Vue.js中的遍历循环指令，其作用是循环遍历一个数组或者对象，将其中的每个元素生成一个特定的HTML结构。
:label：选项的显示文本，例如这里的dep.name，表示选项的文本内容由一个dep.name属性提供。
:value：选项的值，例如这里的dep.id，表示选项的实际值由一个dep.id属性提供。

在一个员工信息的表单中，部门信息使用下拉框渲染，当用户点击下拉框时，会弹出一个下拉列表，包含所有的部门列表选项。当用户选择下拉列表中的一个选项时，el-select组件的v-model属性指定的值将被改变，该选项的value值将被作为v-model的新值，最终被提交到服务器中。

2、分页组件el-pagination

https:// element.eleme.cn/# /zh-CN/component/pagination 更多资料请参考官网

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>

这段代码是Vue.js框架中用于实现分页功能的代码，其中包含分页组件（el-pagination）以及一些事件和数据绑定。

el-pagination：分页组件，用于与分页数据进行交互，如将分页信息渲染到界面并为用户控制分页提供交互API。
@size-change：分页尺寸改变事件，当用户选择了一个新的分页尺寸时触发，可以使用事件处理函数来对新的分页尺寸进行处理。
@current-change：当前页码改变事件，当用户选择了一个新的当前页码时触发，同样也可以使用事件处理函数来处理新的当前页码。
:current-page：当前页码，指定分页组件的当前页码，默认是1。
:page-sizes：分页尺寸选项，用于展示可供用户选择的分页尺寸，例如这里的[3, 6, 9, 12]表示可供用户选择的分页尺寸为3、6、9、12。
:page-size：分页尺寸，指定分页组件当前的分页尺寸，默认为3。例如，当用户选择了一个新的分页尺寸，:page-size属性将会被更新。
layout：分页布局，用于自定义分页控制器和分页信息的布局。这里的布局是"total, sizes, prev, pager, next, jumper"，表示总数、分页尺寸、上一页、分页器、下一页、输入跳转按钮的布局。
:total：总条目数，例如数据表中总共有100条数据，你可以把这个值传递给:total属性。

如果我们在一个分页表格中使用el-pagination组件，当用户选择新的分页尺寸、新的当前页码时，我们可以监听@size-change和@current-change事件来处理这些变化。在处理这些变化之后，我们需要将新的分页信息（即页码和分页尺寸）存储到数据模型中，然后触发一次数据读取以更新表格内容。另外，我们还可以通过自定义layout属性的值来控制分页控制器和分页信息的布局方式。

3、el-dialog对话框

https:// element.eleme.cn/# /zh-CN/component/dialog 更多资料请参考官网

<el-dialog label="left" title="修改员工信息" :visible.sync="empEditDialogVisible" width="35%" >

这段代码是使用 Element UI 中的 el-dialog 组件实现的一个修改员工信息的对话框。下面是对这个组件的各个属性的解释：

label：对话框标签的位置（左、右、上、下），本例中设置为左侧。
title：对话框的标题，本例中设置为“修改员工信息”。
visible：控制对话框的显示状态，用户可以通过控制它的值来显示或隐藏对话框，:visible.sync 表示该属性的值会双向绑定，即当用户手动关闭对话框时，它的值会被自动更新。
width：对话框的宽度，本例中设置为“35%”。
除此之外，这个组件还可以通过 close-on-click-modal 和 lock-scroll 等多个属性来设置对话框的行为和外观。这里列举几个常用的属性：

close-on-click-modal：当用户点击遮罩层时，是否自动关闭对话框，默认为 true。
lock-scroll：在对话框打开时，是否禁止背景滚动，默认为 true，也就是禁止滚动。
custom-class：自定义对话框的 CSS 类名，可以用来自定义对话框的样式。

4、Upload上传

<el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="previewPhoto" :before-upload="beforeAvatarUpload"> <img v-if="tempImageUrl" :src="tempImageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>

这段代码是一个上传组件，使用了 Element UI 的 el-upload 组件。下面是属性的作用和用法：

class: 组件的 CSS 类名，用于样式控制。
action: 上传的地址，这里设为 "#"，表示不实际上传，而是调用 http-request 方法进行上传操作。
show-file-list: 是否显示已上传文件列表，这里设为 false，表示不显示。
http-request: 上传方法，即上传文件时执行的操作，这里是调用 previewPhoto 方法进行上传。
before-upload: 上传前的钩子函数，用于验证文件格式、大小等，这里是调用 beforeAvatarUpload 方法进行验证。

举例说明：

在 Vue 实例中，可以定义 previewPhoto 和 beforeAvatarUpload 两个方法，分别用于上传和验证。比如：

methods: { previewPhoto(file) { // 上传文件的操作，比如调用 API 接口 console.log('上传文件', file); }, beforeAvatarUpload(file) { // 验证文件的操作，比如判断格式、大小等 console.log('验证文件', file); const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; } }

这里的 previewPhoto 方法和 beforeAvatarUpload 方法分别输出上传的文件信息和验证结果。在实际使用中，可以根据业务需求修改这两个方法。

发布于 2023-04-16 22:20 ・IP 属地广东

ElementUI

element