【Vue】Element-UI入门学习引导
目录
Element-UI学习
了解vue开发中一些常用的布局组件库
项目导入element-ui
表单组件el-table
表单组件el-table基本使用
el-table组件插槽实现自定义列
el-table组件作用域插槽使用
分页组件el-pagination
表单组件el-form
el-form组件基本使用
el-form组件表单校验
1.在data()中定义校验规则
2.在模板上配置对应规则（三个配置)
3.处理最终校验结果
自定义校验规则
重置表单清理校验痕迹
树形组件el-tree
el-tree基本使用
el-tree自定义菜单属性(了解即可)
其他组件
下拉菜单el-select
对话框组件Dialog
弹框message-box
Element-UI学习
了解vue开发中一些常用的布局组件库
1.移动端（Vant, Cube-UI, NutUI ）
2.PC端 （ element-ui, Ant Design of Vue, iView）
3.微信小程序： uniapp
布局组件库使用流程一般分为以下几个步骤
1.进官网，查文档
2.根据官网流程，先下载后导包，然后CV
3.遇到问题了如何解决呢？
（1）百度搜索你遇到的问题
（2）去github的issue,面对面与组件作者本人提出问题 ： Issues · ElemeFE/element · GitHub
项目导入element-ui
1.下载element-ui :
npm i element-ui -S
-S: 是--save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。
-S: 是可以省略不写的。
如果要安装开发依赖，则要加 -D。
2.main.js中导入element-ui
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//完整引入 ElementUI
//(1)导包
import ElementUI from 'element-ui'
//(2)导入css样式
import 'element-ui/lib/theme-chalk/index.css'
//(3)注册所有组件
Vue.use(ElementUI)
new Vue({
render: h => h(App),
}).$mount('#app')el-button按钮
type : 设置颜色
plain : 朴素按钮（只有边框颜色，背景色浅灰）
round : 圆角按钮
circle : 圆形按钮
icon : 字体图标按钮
默认按钮
主要按钮
成功按钮
信息按钮
警告按钮
危险按钮
表单组件el-table
表单组件el-table基本使用
行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。
列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握
label：决定当前列显示出的标题 (相当于表头)
prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名。prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。
width: 用来设置列的宽度。如果不设置，它会自适应。
删除
el-table组件插槽实现自定义列
1.插槽作用：父组件传递html结构给子组件
2.table插槽应用：可以让我们自定义表格的列
删除
el-table组件作用域插槽使用
1.插槽作用：父组件传递html结构给子组件
2.table插槽应用：可以让我们自定义表格的列
3.table作用域插槽作用： 让 父组件获取当前子组件 内部数据
删除
分页组件el-pagination
:layout : 设置页码布局（通过关键词排序可以控制页码布局顺序）
- prev:上一页
- pager:页码
- next:下一页
:total : 设置数据的总数
:page-size: 设置一页有多少数据
- 一般页码会和table组合使用
- 作用
- 分页逻辑：总页数 = 总条数（:total） / 每页的条数(:page-size)
:pager-count : 设置页码按钮数量
- `注意点`:范围7-21之间的奇数，如果是偶数则会报错
@current-change : 页码改变事件
- 这个事件有一个默认形参，就是当前改变的页码
Pagination
表单组件el-form
el-form组件基本使用
1.表单中的数据项一般会用一个对象包起来
2.属性名一般和后端接口中保持一致
3.在元素上采用v-model双向绑定
4.绑定事件，通过双向绑定获取表单输入值
登录
取消
el-form组件表单校验
表单校验分为三个步骤
1.在data()中定义校验规则
2.在模板上配置对应规则（三个配置）
给表单设置
rules属性传入验证规则给表单设置
model属性传入表单数据给表单项（Form-Item ）设置
prop属性，其值为设置为需校验的字段名3.处理最终校验结果（是否每一个表单全部校验通过）
1.在data()中定义校验规则
格式
data() {
return {
rules: {
// 字段名1：表示要验证的属性
// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
// 数组中的多条规则会按顺序进行
字段名1: [
{ 验证规则1 },
{ 验证规则2 },
],
字段名2: [
{ 验证规则1 },
{ 验证规则2 },
],
}
}
}data () {
return {
// 表单验证规则，整体是一个对象
// 键：要验证的字段, 值：是一个数组，每一项就是一条规则
rules: {
mobile: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^\d{11}$/,
message: "请输入合法的验证码",
trigger: "blur"
}
],
password: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^\w{6,15}$/,
message: "请输入合法的密码",
trigger: "blur"
},
]
}
}
},注意:rules中的属性名与表单数据项中的属性名必须是一致的。
2.在模板上配置对应规则（三个配置)
给 el-form 组件绑定 model 为表单数据对象
给 el-form 组件绑定 rules 属性配置验证规则
给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称
注意点
位置不要写错了
model和rules和ref是写在 el-form组件上的
prop是写在el-form-item组件上的
单词不要写错（以下三个位置单词需要一致）
v-model绑定的属性
rules的属性
prop的属性
登录
取消
3.处理最终校验结果
给el-form组件添加ref属性用于获取该组件(获取DOM)
语法：
validate 方法是表单组件自带的，用来对表单内容进行检验。
需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证
element-ui的表单组件.validate(valid => { if(valid) { // 通过了验证 } else { // 验证失败 } })
methods: {
doLogin() {
console.log(this.form)
alert("登录成功")
},
//点击确认 : 获取表单树
submitForm() {
this.$refs.myform.validate(valid => {
// valid 就是表单验证的结果，如果是true，表示通过了
console.log(valid)
if (valid) {
// 通过了验证，你可以做后续动作了
this.doLogin()
}
})
},
}自定义校验规则
例如： 密码不能是123456
语法：在rules中自定义validator
rules:{
属性名1: [
{
// 注意参数顺序
validator: function (rule, value, callback) {
// rule：采用的规则
// value: 被校验的值
// callback是回调函数，
// 如果通过了规则检验，就直接调用callback()
// 如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
// 例如：callback(new Error('错误说明'))
},
trigger: 'blur'
}]
}//正则校验
rules: {
mobile: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^\d{11}$/,
message: "请输入合法的验证码",
trigger: "blur"
}
],
password: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^\w{6,15}$/,
message: "请输入合法的密码",
trigger: "blur"
},
{
validator: (rule, value, callback) => {
console.log(rule, value, callback)
if (value === "123456") {
callback(new Error("密码不能是123456哟"))
} else {
callback()
}
},
triggle: "blur"
}
]
}重置表单清理校验痕迹
需求：校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。
语法
this.$refs.form组件的引用.resetFields()
清理校验痕迹
恢复表单默认数据
取消 //点击取消
resetForm(formName) {
//
this.$refs[formName].resetFields()
}树形组件el-tree
什么是树形结构 ： 多级菜单
这是PC端布局里面一个比较复杂的结构
1.
1.1
1.2
2
2.1
2.2
el-tree基本使用
1.树形结构组件比较简单，就只有一个el-tree,难点是里面的数据data
2.数据项中label和children是关键字，不可随意改动。tree组件用它们来显示内容
小提问：学习递归函数的时候，有没有了解过这种特殊的数据结构呢？label : 用于展示菜单的本文
chilren : 数组，里面放子菜单
3.el-tree的
@node-click用于给组件绑定点击事件
// 共三个参数，
// 依次为：
// - 传递给 data 属性的数组中该节点所对应的对象
// - 节点对应的 Node
// - 节点组件本身
handleNodeClick(a, b, c) {
console.log(a, b, c)
}
el-tree自定义菜单属性(了解即可)
tree组件渲染节点title默认使用的是数据中的
label属性识别子节点默认使用的是
children属性，我们尝试把data里的属性名换一下例如：label换成name，children换成childList，就会发现渲染失败了。
如果你非要去自定义这个两个关键字：label和children的话，就需要用到props属性了。
defaultProps是data()中声明的一个对象，我们通过props传递给el-tree告诉它，label和children用我们自定义的属性
其他组件
下拉菜单el-select
下拉选择框
对话框组件Dialog
1.使用默认插槽来自定义内容
2.通过给el-dialog组件添加
:visible.sync="dialogVisible"来控制显示隐藏
dialogVisible是data中的一个布尔类型属性
弹框组件有俩种状态，一个是打开一个是关闭，如果我们想在它打开或者关闭时做一些自己的事情，就可以监听俩个事件
@close 弹框关闭 : dialogVisible从true变成false
@open 弹框打开 : dialogVisible从false变成true
html结构
点击打开 Dialog
这是一段信息
data数据
弹框message-box
提示框
弹框 //提示框
openMessage() {
this.$message({
type: "success ",
message: `月薪15K`
})
},
//弹框
open() {
this.$alert("你真的要走吗？", "系统提示", {
confirmButtonText: "确认",
callback: action => {
this.$message({
type: "info",
message: `action: ${action}`
})
}
})
}