黑马JavaWeb开发笔记09——ElementUI代码引入教程、Element常用组件使用（Table, Pagination, Dialog, Form）

标签：vue JavaWeb Form 对话框代码 ElementUI 表单组件

前言

本篇文章是2023年最新黑马JavaWeb开发笔记09：ElementUI代码进入教程、常用组件使用的总结，帮助需要学习Web开发的朋友温故而知新。

介绍
- Element：饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页
- Element 提供了很多**组件（组成网页的部件）**供我们使用
  - 例如：超链接、按钮、图片、表格等等。
- 如下图所示就是我们开发的页面和ElementUI提供的效果对比：可以发现ElementUI提供的各式各样好看的按钮
作为一个后台开发者，只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中，并且做一些修改即可。
其官网地址：https://element.eleme.cn/#/zh-CN

首先，我们先要安装ElementUI的组件库，打开VS Code，停止之前的项目，然后在命令行输入如下命令：npm install [email protected]

然后我们需要按照vue项目的开发规范，在src/views目录下创建一个vue组件文件，注意组件名称后缀是.vue，并且在组件文件中编写之前介绍过的基本组件语法
最后我们只需要去ElementUI的官网，找到组件库，然后找到按钮组件，复制代码段
紧接着粘贴组件代码到我们的vue组件文件中
最后，我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件
然后运行我们的vue项目，浏览器直接访问之前的7000端口

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

在官网复制喜欢的表格代码
复制粘贴< template >代码：
复制粘贴< script >代码：
最后ctrl+s保存之后看一下网页：
那么ElementUI是如何将数据模型绑定到视图的呢？主要通过如下几个属性：
- data: 主要定义table组件的数据模型
- prop: 定义列的数据应该绑定data中定义的具体的数据模型
- label: 定义列的标题
- width: 定义列的宽度
具体示例含义如下图所示：

Pagination: 分页组件，主要提供分页工具条相关功能。其展示效果图下图所示：
直接在官网找分页组件：
复制粘贴到我们自己的代码里面：
保存代码然后查看网页：
对于分页组件我们需要关注的是如下几个重要属性（可以通过查阅官网组件中最下面的组件属性详细说明得到）
- background: 添加背景颜色，也就是上图蓝色背景色效果。
- layout: 分页工具条的布局，其具体值包含 sizes , prev , pager , next , jumper , -> , total , slot 这些值
- total: 数据的总数量
在原来的功能上，添加了一些额外的功能，其具体对应关系如下图所示：
对于分页组件还有2个非常重要的事件需要学习：
- size-change ： pageSize 改变时会触发
- current-change ：currentPage 改变时会触发

Dialog: 在保留当前页面状态的情况下，告知用户并承载相关操作。
其企业开发应用场景示例如下图所示：
在这里插入图片描述

制作一个新的对话框，其代码如下
还需要注意的是，针对这个新的对话框，我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示
复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中，但是，此处官方提供的表单项标签太多，所以我们只需要保留前面3个表单项组件，其他多余的删除
表单项标签使用了v-model双向绑定，所以我们需要在vue的数据模型中声明变量，同样可以从官方提供的代码中复制粘贴，但是我们需要去掉我们不需要的属性，通过观察上述代码，我们发现双向绑定的属性有4个，分别是form.name,form.region,form.date1,form.date2
官方的代码中，在script部分中，还提供了onSubmit函数，表单的立即创建按钮绑定了此函数，我们可以输入表单的内容，而表单的内容是双向绑定到form对象的，所以我们修改官方的onSubmit函数如下即可，而且我们还需要关闭对话框
打开浏览器，我们打开对话框，并且输入表单内容，点击立即创建按钮，呈现如下效果