Vue教学17：Element UI基础组件上手，打造美观实用的Vue应用

2024-03-08 14:36
文章标签 javascript 基础 教学 应用 组件 ui 美观 打造 vue 实用 17 frontend element

本文主要是介绍Vue教学17：Element UI基础组件上手，打造美观实用的Vue应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

大家好，欢迎回到我们的Vue教学系列博客！在前十六篇博客中，我们学习了Vue.js的基础知识、安装Node.js与npm、使用Vue Devtools进行调试、Vue实例与生命周期钩子、数据绑定（单向与双向）、计算属性与侦听器、条件渲染和列表渲染、事件处理、组件之间的传值（props和$emit）、动态组件和异步组件、组件间的通信（provide/inject，event bus），以及探索并尝试安装一个基于Vue.js的UI框架——Element UI。今天，我们将深入探讨并学习如何使用Element UI的基础组件，以打造美观实用的Vue应用。无论你是Vue新手小白，还是有一定基础的开发者，掌握Element UI的基础组件都将大大提高你的开发效率。

一、Element UI基础组件概览

Element UI提供了丰富的组件，包括按钮、输入框、表格、弹窗、分页等。这些组件可以帮助我们快速搭建界面，提高开发效率。接下来，我们将学习一些常用的Element UI基础组件。

二、按钮组件（ElButton）

按钮组件（ElButton）是Element UI中非常基础且重要的组件之一，它用于触发各种操作或事件。按钮组件支持多种类型，包括主要按钮、成功按钮、信息按钮、警告按钮和危险按钮等，每种类型的按钮都有其特定的样式和用途。

1. 按钮类型

按钮的类型决定了按钮的外观和默认行为。以下是一些常用的按钮类型：

  • 主要按钮（Primary）：默认样式，通常用于主要操作。
  • 成功按钮（Success）：表示成功的操作，如“保存”或“提交”。
  • 信息按钮（Info）：表示提供信息或状态，如“详情”或“帮助”。
  • 警告按钮（Warning）：表示可能会有副作用的操作，如“删除”或“取消”。
  • 危险按钮（Danger）：表示危险或破坏性操作，如“删除”或“重置”。
<template><div><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></div>
</template>

在这个例子中，我们使用了不同类型的按钮，包括主要按钮、成功按钮、信息按钮、警告按钮和危险按钮。

2. 禁用状态

<template><div><el-button type="primary" :disabled="true">禁用按钮</el-button></div>
</template>

在这个例子中，我们通过:disabled="true"属性禁用了一个按钮。

3. 圆角按钮

<template><div><el-button type="primary" round>圆角按钮</el-button></div>
</template>

在这个例子中，我们通过round属性创建了一个圆角按钮。

4. 加载状态

按钮还可以显示加载状态，这通常用于表示后台操作正在进行中。

<el-button type="primary" :loading="loading">加载按钮</el-button>

在这个例子中，按钮的加载状态通过:loading="loading"绑定了一个布尔值。

5. 按钮尺寸

按钮有多种尺寸，包括大号按钮、小号按钮和默认尺寸。

<el-button type="primary" size="large">大号按钮</el-button>
<el-button type="primary" size="small">小号按钮</el-button>
<el-button type="primary" size="default">默认按钮</el-button>

在这个例子中，按钮有三种不同的尺寸，通过size属性进行设置。

6. 图标按钮

按钮可以包含图标，常用于需要视觉提示但不需要文字说明的情况。

<el-button type="primary" icon="el-icon-search">搜索按钮</el-button>

在这个例子中，按钮包含了一个搜索图标。

7. 按钮组

当需要放置多个相关按钮时，可以使用按钮组（Button Group）。

<el-button-group><el-button type="primary">上一页</el-button><el-button type="primary">下一页</el-button>
</el-button-group>

在这个例子中，两个按钮被放置在一个按钮组中，通常用于实现导航或切换功能。

三、输入组件（ElInput）

输入组件（ElInput）是Element UI中用于创建输入框的组件，它常用于收集用户数据，如文本、密码、数字等。ElInput组件支持多种类型，包括普通文本输入、密码输入、数字输入等，并且可以通过v-model指令实现双向数据绑定。

1. 基础用法

ElInput的基础用法非常简单，只需要在模板中添加<el-input>标签，并使用v-model指令绑定数据即可。

<template><div><el-input v-model="inputValue" placeholder="请输入内容"></el-input></div>
</template><script>
export default {data() {return {inputValue: ''};}
};
</script>

在这个例子中，我们创建了一个简单的文本输入框，用户可以在其中输入内容，输入框的内容会实时更新到inputValue数据属性中。

2. 类型

ElInput支持多种类型，包括：

  • text：普通文本输入。
  • password：密码输入，显示为点。
  • number：数字输入，支持数字键盘。
  • email：电子邮件输入，会自动校验邮箱格式。
  • url：URL输入，会自动校验URL格式。
<template><div><el-input v-model="inputValue" placeholder="请输入内容" type="text"></el-input><el-input v-model="passwordValue" placeholder="请输入密码" type="password"></el-input><el-input v-model="numberValue" placeholder="请输入数字" type="number"></el-input><el-input v-model="emailValue" placeholder="请输入邮箱" type="email"></el-input><el-input v-model="urlValue" placeholder="请输入网址" type="url"></el-input></div>
</template><script>
export default {data() {return {inputValue: '',passwordValue: '',numberValue: '',emailValue: '',urlValue: ''};}
};
</script>

3. 禁用状态

输入组件也可以被禁用，禁用后的输入框将不可编辑。

<el-input v-model="inputValue" placeholder="请输入内容" :disabled="true"></el-input>

在这个例子中，输入框被设置为禁用状态，通过:disabled="true"绑定了一个布尔值。

4. 自动完成

ElInput支持自动完成功能，可以用于提示用户输入。

<el-input v-model="inputValue" placeholder="请输入内容" autocomplete="off"></el-input>

在这个例子中，通过autocomplete="off"属性禁用了浏览器的自动完成功能。

5. 自动聚焦

输入组件可以自动聚焦，以便用户直接开始输入。

<el-input v-model="inputValue" placeholder="请输入内容" autofocus></el-input>

在这个例子中，通过autofocus属性使输入框在页面加载时自动聚焦。

6. 文本area

对于多行文本输入，可以使用textarea类型。

<el-input v-model="textareaValue" placeholder="请输入多行文本" type="textarea"></el-input>

在这个例子中，我们创建了一个多行文本输入框。

四、表格组件（ElTable）

表格组件（ElTable）是Element UI中用于显示和操作表格数据的组件，它提供了丰富的功能，如排序、筛选、分页等，非常适合展示复杂的数据列表。

1. 基础用法

<template><div><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>
</template><script>
export default {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>

在这个例子中，我们使用el-table和el-table-column组件创建了一个简单的表格，并使用:data="tableData"属性绑定了表格数据。

2. 表格操作

<template><div><el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><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>
</template><script>
export default {data() {return {tableData: [// ... 省略数据部分],multipleSelection: []};},methods: {handleSelectionChange(val) {this.multipleSelection = val;}}
};
</script>

在这个例子中，我们添加了一个多选列，并定义了一个handleSelectionChange方法，用于处理表格行的选中状态变化。

3. 表格属性

ElTable支持多种属性，用于控制表格的行为和样式：

  • :data="tableData"：绑定表格的数据源。
  • style="width: 100%"：设置表格的宽度。
  • max-height="200px"：设置表格的最大高度。
  • border：是否显示表格边框。

4. 列属性

ElTableColumn支持多种属性，用于控制列的行为和样式：

  • prop：列对应的数据字段。
  • label：列的标题。
  • width：列的宽度。
  • sortable：是否启用列的排序功能。
  • filters：列的筛选条件。
  • show-overflow-tooltip：是否显示溢出内容的工具提示。

5. 排序

要启用表格的排序功能，只需要在<el-table-column>中设置sortable属性为true。

<el-table-column prop="date" label="日期" width="180" sortable></el-table-column>

在这个例子中，日期列被设置为可排序的。

6. 筛选

表格的筛选功能通过filters属性实现，它是一个对象数组，每个对象定义了一个筛选条件。

<el-table-column prop="date" label="日期" width="180"><template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>

在这个例子中，我们创建了一个简单的筛选模板，用于显示日期列的值。

7. 分页

要实现表格的分页功能，可以使用<el-pagination>组件，并通过:current-page="currentPage"和:page-size="pageSize"属性绑定当前页和每页条数。

<template><div><el-table :data="tableData" style="width: 100%"><!-- ... 省略其他列定义 --></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10, 20, 30, 40]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="100"></el-pagination></div>
</template><script>
export default {data() {return {tableData: [],currentPage: 1,total: 100    };},methods: {handleSizeChange(newSize) {console.log(`每页 ${newSize} 条`);},handleCurrentChange(newPage) {this.currentPage = newPage;console.log(`当前页: ${newPage}`);}}
};
</script>

在这个例子中，我们结合了表格和分页组件，以实现数据的分页显示。

五、弹窗组件（ElDialog）

弹窗组件（ElDialog）是Element UI中用于创建模态对话框的组件，它允许我们在应用的顶层覆盖一个新页面，显示特定的信息或表单，直到用户与之交互。弹窗组件在处理用户输入、显示详细信息或确认操作时非常有用。

1. 基础用法

ElDialog的基础用法包括创建对话框和定义其内容。首先，你需要使用<el-dialog>标签包裹对话框，并使用title属性设置对话框的标题。

<template><div><el-button type="primary" @click="dialogVisible = true">打开对话框</el-button><el-dialog :visible.sync="dialogVisible" title="欢迎对话框"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false};}
};
</script>

在这个例子中，我们使用el-dialog组件创建了一个简单的模态对话框，并通过:visible.sync="dialogVisible"属性控制对话框的显示和隐藏。

2. 属性

ElDialog支持多种属性，用于控制对话框的行为和样式：

  • :visible.sync="dialogVisible"：控制对话框的显示和隐藏，通常与Vue数据属性绑定。
  • title="欢迎对话框"：设置对话框的标题。
  • width="30%"：设置对话框的宽度。
  • before-close：设置对话框关闭前的钩子函数。
  • close-on-click-modal：点击模态背景是否关闭对话框。
  • show-close：是否显示关闭按钮。

3. 插槽

ElDialog支持插槽，允许你在对话框内部自定义内容。除了默认的插槽外，还可以使用以下插槽：

  • title：自定义对话框的标题区域。
  • footer：自定义对话框的底部操作区域。
<el-dialog :visible.sync="dialogVisible" title="自定义对话框"><span>自定义内容</span><template v-slot:title><h2>自定义标题</h2></template><template v-slot:footer><el-button @click="dialogVisible = false">自定义按钮</el-button></template>
</el-dialog>

在这个例子中，我们自定义了对话框的标题和底部操作按钮。

4. 方法

ElDialog还提供了一些方法，用于控制对话框的行为：

  • open()：打开对话框。
  • close()：关闭对话框。

六、总结

通过本博客的学习，我们深入了解了Element UI的基础组件，包括按钮、输入框、表格、弹窗和分页等。这些组件是构建美观实用Vue应用的关键，它们不仅提供了丰富的功能，还支持样式定制，使得我们可以轻松打造符合需求的界面。

掌握Element UI的基础组件对于提高Vue.js应用的开发效率非常重要。它们不仅可以帮助我们节省时间，还能确保我们的应用拥有高质量的UI。希望这篇博客能帮助你深入理解Element UI的基础组件，并在实际项目中灵活运用。

如有任何疑问，欢迎在评论区留言讨论。让我们一起学习，共同进步！

往期教学请前往作者VUE专栏下查看

这篇关于Vue教学17：Element UI基础组件上手，打造美观实用的Vue应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/787403。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
hdu1394(线段树点更新的应用)

hdu1394(线段树点更新的应用)

题意：求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质，在0到n-1这些数字组成的乱序排列，将第一个数字A移到最后一位，得到的逆序数为res-a+(n-a-1) 知道上面的知识点后，可以用暴力来解 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2