饿了么-Element-Ui

一、element-ui 准备

安装: npm i element-ui -S
引入

引入样式
引入组件库

在main.js中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

二、用到的主要组件table、pagination、from、tree、dialog

table

通过Scoped slot可以获取到row,column,$index和store（table内部的状态管理）的数据

:data: 数据源
prop: 决定数据是哪个属性 - 对于表格来说，它的数据是一个数组，每一个元素是一个对象
lable: 决定当前列显示出的标题
width: 用来设置列的宽度。如果不设置，它会自适应。

pagination

layout 布局
total 一共有多少条数据
@current-change 分页事件

from

校验：

1. 在data（）定义规则

rules: {
   字段名：[
     {// 规则1}，
     {// 规则2}，
     {validator: function(rule, value, callback) {
         // 通过校验： callback() 
         // 没有通过校验： callback(new Error('错误说明')) 
     }}
   ]
}

2. 在模板中应用规则

el-form

model： v-model
ref：添加ref来引用el-form组件。
rules：给表单设置 rules 属性传入验证规 el-form-item
prop：

直接使用prop只能渲染文本，通过prop不能直接渲染的时，我们需自定义内容渲染
自定义这个两个关键字：label和children，就需要用到props属性
prop 属性需要指定表单对象中的数据名称

3. 手动兜底校验

this.$refs.表单组件.validate(valid => {
  valid   ==> true,false
})

注意：

下面这三个地方的属性要一致！清空校验：

this.$refs.表单组件.resetFields()

tree

树状结构：有一些业务场景在描述主体关系的时候必须使用树形数据，比如：我们常见的家庭成员关系图，公司里的组织架构等 示例代码

<template>
  <el-tree :data="data"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }]
    }
  }
}
</script>

dialog 弹框组件

使用默认插槽来自定义内容
两种状态，打开和关闭，若想在它打开或关闭时做一些自己的事情，就可以监听两个事件
@close 弹框关闭 : dialogVisible从true变成false
@open 弹框打开 : dialogVisible从false变成true

弹框组件一共俩种状态：打开和关闭 visible.sync=“bool值”
open和close两个自定义事件要关注