目录
1.使用流程
1、首先下载npm i element-ui -S 【脚手架已经默认创建：vue create 'name'】
-S：是--save的缩写，表示这个包是生产依赖，表示项目上线时也必须使用这个包。
-S：可以省略。
如果要安装开发依赖项，请添加 -D。
2.table组件-基本使用
2-1 数据源由table组件的data属性指定（我们不需要使用v-for指令循环）
行（数据）决定了表的数据。 它是一个链表，数组中的每个元素都是一个对象，代表一行。
列决定表结构。列由el-table-column决定。 下面需要掌握三个属性。
label：决定当前列显示的标题 prop：决定当前列数据的来源。 对于表来说，它的数据是一个字段，每个元素是一个对象。 这里的 prop 值是属性名 width：用于设置列的长度。 如果未设置，它将适应。
4.在el-table中使用data属性。在el-table-item上使用prop属性
2-2 表格单元格只能呈现文本。 如果你想渲染图片或者其他东西，可以自定义：
删除 prop 属性
使用千斤顶
row、column、$index、store（表内部状态管理）的数据可以通过Scoped slot获取。
slot 用作作用域套接字：其作用是自定义内容渲染（prop 只能渲染文本）。
如何获取当前行的完整对象数据？ 范围.行
43 翻页组件
基础使用：
1.layout中的关键字有自己的含义；
2.total用来设置数据的总条数
3.事件名不是驼峰命名法，而是采用kebab-case(昵称：烤串命名法)
4.它会自动接收页码
4 Form表单组件-基本使用
1. 表单中的数据项通常包装在一个对象中。
2、属性名称通常与前端socket中的一致。
3.在元素上使用v-model单向绑定
4. 表单内容必须经过验证（用户的任何输入都不能被信任！）
5.如果使用组件库中的表单，最好使用自己的验证方法。
4-1 表单验证--共三步
1. 定义验证规则。 在 data() 中按格式定义规则
data() {
// 这里写校验函数
const validCode = (rule, value, callback) => {
// 添加时的校验：code不能重复
let existCodeList = this.originList
if (this.isEdit) {
// 编辑时的校验: code能取自己
existCodeList = this.originList.filter(item => item.id !== this.formData.id)
}
existCodeList.map(it => it.code).includes(value)
? callback(new Error(value + '已经占用'))
: callback()
}
return {
rules: {
// 字段名1：表示要验证的属性
// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
// 数组中的多条规则会按顺序进行
字段名1: [
{ 验证规则1 ,validator: validName,},
{ 验证规则2 },
]
}
}
}2.在模板上配置属性来应用规则（三种配置）
注意：规则中的属性名称和表单数据项中的属性名称必须一致。
2.1给表单设置rules属性，传入验证规则【el-form组件中绑定rules属性，配置验证规则：rules="rules"]
2.2 给表单设置model属性并传入表单数据【在el-form组件中将model绑定到表单数据对象：model="formData"]
2.3 设置表单项（Form-Item）的prop属性elementui报表组件elementui报表组件，其值设置为需要校验的数组名【将prop属性prop="name"绑定到需要校验的表单项el-form-item ，注意：prop属性需要在表单对象中指定数据名称]
3、自动验证
1.validate方法是表单组件自带的，用来对表单内容进行检验。
2.需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证
element-ui的表单组件.validate(valid => {
if(valid) {
// 通过了验证
} else {
// 验证失败
}
})
---------------^-------------------
submit () {
this.$refs.form.validate(valid => {
// valid 就是表单验证的结果，如果是true，表示通过了
// console.log(valid)
if (valid) {
// 通过了验证，你可以做后续动作了
this.doLogin()
}
})
}注：1、自定义规则可以使标定逻辑更加灵活，其格式是固定的。
2.必须调用回调
4.2 重置表格以清除校准痕迹
校准失败时会有白色提示文字。 有时我们在执行某项操作后需要清除当前校准失败留下的痕迹，为下一次校准做准备。
格式：引用this.$refs.form component.resetFields()
功能：清洁校准痕迹| 恢复表单默认数据
5Tree组件的基本使用
有一些业务场景在描述主体关系时必须使用树形数据，比如：我们常见的家庭成员关系图、公司的组织架构等。要描述这样的业务场景，相应的，我们就要给出中的Data树结构
data:[
{
label:'a',
id:101,
children:[
{},
{},
{}
]
}
]上面我们就完成了一个基础树形组件的渲染，依赖一个data属性即可，data属性传入的就是树状结构数据项中的label和children都是关键字，不能随便更改。 树组件使用它们来显示内容
树组件渲染节点标题默认使用数据中的`label属性`，默认使用`children`属性来标识子节点。 我们尝试改变数据中的属性名称，例如：将label替换为name，将children替换为childList，你会发现渲染失败。
5.1 获取具体树节点数据
当我们点击一个树状的子节点时，如何获取当前点击的节点对应的数据呢？
监听时间：@node-click="handleNodeClick"`
export default {
methods:{
// 共三个参数，
// 依次为：
// - 传递给 data 属性的数组中该节点所对应的对象
// - 节点对应的 Node
// - 节点组件本身
handleNodeClick(a,b,c){
console.log(a,b,c)
}
}
}
6对话框组件
使用默认插孔自定义内容
6.1 窃听 open 和 close 问题
弹框组件有两种状态，一种是打开，一种是关闭。 如果我们想在打开或关闭时做一些自己的事情，我们可以窃听两个风暴
@close 关闭弹框：将dialogVisible由true改为false
@open 弹出框打开：dialogVisible 由 false 变为 true
6.2 取消两种关机方式
：点击时关闭模态=“假”
:close-on-press-escape="false"
6.3 总结
弹出组件有打开和关闭两种状态：visible.sync="Boolean value"
需要关注两个自定义事件，open和close。
取消两种关闭方法（点击描边、esc）
