目录
1、前言：
Element UI 是一个流行的开源前端组件库，用于构建 Web 用户界面。它主要设计用于 Vue.js，这是一个渐进式的 JavaScript 框架。Element UI 提供了一套预设计和样式化的 UI 组件，开发人员可以轻松地将它们集成到他们的 Vue.js 应用程序中。这些组件包括按钮、表单、表格、模态框、导航菜单等，可以显著加快开发过程，帮助创建一致且外观吸引人的用户界面。
Element UI 的关键特点和特性包括：
-
Vue.js 集成：Element UI 特别设计为与 Vue.js 无缝集成，充分利用 Vue 的组件化架构。
-
自定义：尽管 Element UI 带有预设计的样式和主题，但它可以高度自定义。开发人员可以轻松地覆盖默认样式，以匹配项目的设计要求。
-
响应式设计：该库的设计目标是响应式的，适用于在桌面和移动设备上都表现良好的应用程序。
-
国际化（i18n）：Element UI 内置了对多种语言的支持，允许开发人员创建可以轻松翻译和本地化的应用程序。
-
活跃的开发：截至我在2021年9月的最后一次知识更新时，Element UI 正在积极维护和更新。然而，开源项目的状态随时间可能会变化，因此建议您查阅项目的 GitHub 存储库或官方网站，以获取最新信息和更新。
-
庞大的社区：Element UI 拥有庞大且活跃的开发者社区，这意味着在使用时可以找到资源、文档和社区支持。
-
模块化架构：它使用模块化架构，意味着您可以只导入所需的组件，从而保持应用程序的轻量化。
-
可访问性：它遵循网络可访问性的最佳实践，力求提供易于访问的界面。
2、Element UI的官方网站为：
3、使用Element UI
3.1 导入资源
CSS样式文件: Element UI的CSS文件包含了所有组件的样式
Vue的JS文件: Element UI基于Vue开发，需要引入相应版本的vue.js文件
JS部分: Element UI的JS文件包含了组件的逻辑和交互行为
在html文件的<titlt>下导入下面资源
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>3.2布局和容器组件
3.2.1 Layout布局
el-row和el-col是用于响应式布局的基础组件
el-row用于创建一行
el-cal用于创建一列，
el-row是行容器,它的作用是用来组织和包含el-col，通过gutter属性可以设置栅格之间的空自距离。
el-col是列容器，它用来组织内容的布局。el-col 的宽度可以通过给:span属性设置一个值来调节。
:span属性的值表示当前el-col 占据整个行(el-row) 的宽度的份数，行的宽度被分为24份，
默认:span为24，则此时整个el-col的宽度为整个行的宽度。如果设置:span=12"，则表示此el-col占据整个行的1/2宽度。
el-col还支持设置
-
行偏移(offset)：在 Element UI 的栅格系统中，
offset属性用于在水平方向上将一个列偏移一定数量的列数。它是通过在一个el-col元素上设置:offset="n"，其中n是要偏移的列数，来实现的。例如，:offset="2"表示将该列向右偏移两列的宽度。 -
列偏移(push)：
push属性用于在水平方向上推动一个列，使其在布局中向右移动。与offset不同，push不会影响布局中其他列的位置，只会将指定的列推向右侧。在el-col元素上使用:push="n"，其中n是要推动的列数。例如，:push="3"表示将该列向右推动三列的宽度。 -
列拉动(pull)：
pull属性与push相反，它用于将列向左拉动，从而重新排列布局中的列。在el-col元素上使用:pull="n"，其中n是要拉动的列数。例如，:pull="2"表示将该列向左拉动两列的宽度。
3.2.2Container布局容器
在 Element UI 中，<el-container> 是一个布局容器组件，用于创建页面的整体布局。<el-container> 提供了一种简单的方式来划分页面的不同区域，通常包括头部、侧边栏、内容区域和底部。
以下是一些关于 <el-container> 布局容器的重要特性和用法：
-
布局结构：通常，一个页面可以被划分为以下几个区域：
<el-header>：用于放置页面的头部内容，例如导航菜单、标题等。<el-aside>：用于侧边栏内容，通常用于导航链接、菜单等。<el-main>：主要的内容区域，通常用于显示页面的主要内容。<el-footer>：底部区域，用于放置页脚信息或者版权声明等。
-
布局嵌套：您可以嵌套多个
<el-container>，以创建更复杂的页面结构。例如，您可以在<el-main>区域再嵌套一个<el-container>，以进一步划分主要内容区域。 -
弹性布局：
<el-container>使用 Flexbox 布局模型，使得页面布局在不同屏幕尺寸下能够自适应。 -
自定义样式：您可以自定义
<el-container>和其子组件的样式，以满足项目的设计需求。Element UI 提供了一些默认的样式，但您可以轻松地覆盖它们。 -
响应式设计：Element UI 的布局容器组件可以轻松地适应不同的屏幕尺寸和设备，以创建响应式设计。
-
以下是一个简单的示例，演示如何使用
<el-container>创建一个基本的页面布局：
<template>
<el-container>
<el-header>Header</el-header>
<el-aside width="200px">Sidebar</el-aside>
<el-main>Main Content</el-main>
<el-footer>Footer</el-footer>
</el-container>
</template>
3.2.3卡片
<el-card> 是 Element UI 中的一个组件，用于创建带有卡片式样的容器。这个组件可以用于展示各种内容，如文章、产品信息、通知等。<el-card> 提供了一种简单的方式来创建带有标题、内容和操作区域的卡片。
以下是一些关于 <el-card> 组件的重要特性和用法：
-
标题和内容：您可以在
<el-card>中设置标题和内容。标题通常会放置在卡片的顶部，而内容则可以包含文本、图片、其他组件等。 -
操作区域：
<el-card>也支持操作区域，通常用于放置操作按钮、链接等。您可以在操作区域中放置任何内容，以便与卡片内容交互。 -
阴影效果：
<el-card>可以通过添加阴影效果来创建卡片的浮动感，使其在页面上更加突出。 -
边框效果：卡片可以带有边框，以便与其他元素区分开来。
-
可扩展性：
<el-card>可以包含其他 Element UI 组件，从而在卡片内部创建更丰富的内容。
4、常用组件
4.1按钮组件
在Element UI中，可以使用el-button 标签来声明一个按钮， 并通过标签的属性来设定按钢的光的和样式。
el-button 的常用属性如下:
type:按钮类型，包括primary, success, warning, danger等，默认为default
size:按钮大小，包括medium, small, mini,默认为medium
icon: 按钮图标，可以使用element-ui中的icon名称或自定义图标class
plain: 是否是朴素按钮，朴素按钮背景透明
round:是否是圆角按钮
circle:是否是圆形按钮
4.2消息提示
在 Element UI 中，您可以使用消息提示来向用户显示通知、警告或成功消息。Element UI 提供了 this.$message 对象，该对象具有多个方法用于显示不同类型的消息提示。以下是一些常用的消息提示方法和选项：
- Message 提示：
this.$message(options)：显示一条基本的消息提示。this.$message.success(message)：显示成功消息提示。this.$message.warning(message)：显示警告消息提示。this.$message.info(message)：显示信息消息提示。this.$message.error(message)：显示错误消息提示。
<template>
<div>
<el-button @click="showMessage">Show Message</el-button>
</div>
</template>
<script>
export default {
methods: {
showMessage() {
this.$message({
message: 'This is a basic message'
});
this.$message.success('This is a success message');
this.$message.warning('This is a warning message');
this.$message.info('This is an info message');
this.$message.error('This is an error message');
}
}
};
</script>
- 自定义消息选项：
您还可以通过传递一个选项对象来自定义消息提示的外观和行为。
message：要显示的消息内容。type：消息的类型，可以是'success'、'warning'、'info'、'error'。duration：消息显示的持续时间（毫秒）默认为3000毫秒。showClose：是否显示关闭按钮 默认为false。- center,表示是否居中显示，默认为false
onClose：消息关闭时的回调函数。-
dangerouslyUseHTMLString, 表示message属性是否为一段HTML代码，默认为false
<template> <div> <el-button @click="showCustomMessage">Show Custom Message</el-button> </div> </template> <script> export default { methods: { showCustomMessage() { this.$message({ message: 'This is a custom message', type: 'success', duration: 3000, showClose: true, onClose: () => { console.log('Message closed'); } }); } } }; </script>4.3表单
el-form是Element UI中的表单组件，用于创建包含验证和布局的表单。
在l-form组件中，每一个表单域由一个el-form-item 组件构成，表单域中可以放置各种类型的表单控件
表单控件：el-input、 el-select、el-checkbox、 el-radio、 el-switch、 el-datepicker、 el-timepicker.
el-form（表单组件）：
<el-form>是 Element UI 中的表单容器组件。- 通过
<el-form>，您可以创建包含验证和布局的表单。 model属性可以用来实现表单数据的双向绑定，将表单控件的值与表单数据关联起来。<el-form>还提供了rules属性，用于定义表单项的校验规则。
<el-form :model="formData" :rules="formRules">
<!-- 表单控件（el-form-item 内部） -->
</el-form>
el-form-item（表单域）：
<el-form-item>用于包装表单中的单个控件，如输入框、下拉框等。label属性用于定义控件前的标签。prop属性用于设置校验规则时的字段名。- 表单控件可以嵌套在多个
<el-form-item>内部以创建复杂的表单布局。
<el-form :model="formData">
<el-form-item label="Name" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
</el-form>
4.3.1表单控件（Form Controls）：
- Element UI 提供了一系列的表单控件，用于收集不同类型的用户输入数据。
- 一些常用的表单控件包括：
<el-input>: 文本输入框<el-select>: 下拉框<el-checkbox>: 复选框<el-radio>: 单选框<el-switch>: 开关<el-datepicker>: 日期选择器<el-timepicker>: 时间选择器
这些表单控件可以根据不同的需求用于构建表单，每个控件都具有相应的属性和事件，以满足不同的用户输入要求。通过将它们嵌套在 <el-form-item> 中，可以轻松地创建验证和布局良好的表单界面。
4.4表格
el-table（表格组件）：
<el-table>是 Element UI 提供的表格组件，用于展示和处理数据。- 它非常灵活，可以通过不同的配置和自定义来满足各种数据展示和交互需求。
- 支持数据的分页、排序、筛选等功能，以及分组、合计、固定列等高级功能。
<el-table :data="tableData">
<!-- el-table-column 组件 -->
</el-table>
el-table-column（表格列组件）：
<el-table-column>作为<el-table>的子组件，用于定义表格中的列。- 每个
<el-table-column>代表表格的一列，您可以在其中配置列的各种属性和功能。 - 通过
prop属性指定该列对应的数据项，在表格的:data属性中传递数据数组。
<el-table :data="tableData">
<el-table-column label="Name" prop="name"></el-table-column>
<el-table-column label="Age" prop="age"></el-table-column>
</el-table>
在上述示例中，tableData 是一个数据数组，包含多个对象，每个对象代表表格中的一行数据。通过 <el-table-column>，您可以定义要在表格中显示的列，并使用 prop 属性将列与数据对象的属性关联起来。
el-table-column 常用属性：
label：列显示的名称。prop：列所对应的数据属性名称。width：列的宽度。min-width：列的最小宽度。sortable：该列的数据是否可排序。
<el-table :data="tableData">
<el-table-column label="Name" prop="name" width="150"></el-table-column>
<el-table-column label="Age" prop="age" sortable></el-table-column>
</el-table>
上述示例中的 <el-table-column> 设置了列的宽度和可排序属性。这些属性使得您可以根据需求自定义表格的外观和功能。
总之，Element UI 提供了强大而灵活的表格组件，通过 <el-table> 和 <el-table-column> 可以轻松地创建用于展示、编辑和交互的数据表格。
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
