element 常用组件大集合

el-tree 树形控件

el-table 表格

// element-ui 表格控件 


// 表格的一列

el-pagination 分页组件

el-form 表单

 // 表单中的一项
   


// 和 input 没什么区别
 

el-switch 开关

// Switch 开关
<el-switch

// 绑定v-model到一个Boolean类型的变量,可以使用active-color属性与inactive-color属性来设置开关的背景色。
  v-model="value"

// 开 返回值
 active-value="1"

// 关 返回值
inactive-value="0"

// 开 color
  active-color="#13ce66"

//关 color
  inactive-color="#ff4949">
</el-switch>

el-cascader 级联选择器

// Cascader 级联选择器  
 <el-cascader

      // 样式  
      class="inputW"

     // 尺寸
      size="mini"

      // value 值
      :value="value"

     // 连接各个分级的连接符
      separator=" - "

     // 对应的数据，让其对应
      :props="defaultProp"

     // 数据源
      :options="options"

     // change 事件
      @change="handleChange"
    />

el-upload 上传

 // Upload 上传
  <el-upload

    class="avatar-uploader"

    // action是上传地址，即使不使用也不能删除，可以为空 
    action=""

    //show-file-list不展示列表 
    :show-file-list="false"

   // 文件上传成功时的钩子
    :on-success="handleAvatarSuccess"

    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    :before-upload="beforeAvatarUpload"

   // 覆盖默认的上传行为，可以自定义上传的实现
    :http-request="uploadImage"
  >

    // 有图片显示图片，没有则显示图标
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>

el-select/option

Select 选择器，v-model的值为当前被选中的el-option的 value 属性值

  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

el-tree数据回填

1.首先要先在 el-tree 组件中设置 ref

2.通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key属性

3. 回显：

this.$refs.tree.setCheckedKeys(要回显的数据)

4.处理异步

 this.$nextTick(() => {
         this.$refs.tree.setCheckedKeys(res.data.permIds)
 })

el-checkbox-group数据回填

1.在子组件定义函数， 发请求，准备回显数据

2.在父组件插槽中定义 ref 

3.在父组件 调用子组件：this.$refs.refRole.getUserRole()

4.处理异步
      this.$nextTick(() => {
        this.$refs.refRole.getUserRole()
      })

el-form 数据回填

1.设置 :model="form"  

2. 定义 data(){   form: { }, }

3. 将请求的数据赋值给 form

element-ui 组件 el-form 自定义校验

//  validator 自定义校验属性 

validator: (rule, value, callback) => {
 if (this.userInfo.timeOfEntry) {
      if (new Date(this.userInfo.timeOfEntry) > new Date(value)) {

    //  错误，校验不通过，显示提示信息         
    callback(new Error('转正时间不能小于入职时间'))

    // 结束执行  
    return
     }
  }

    // 正确，校验通过放行
    callback()
  }

增加 封装一个组件（.vue）

1.在新建的组件中定义表单 el-form

2.表单校验

3.发请求添加

4.刷新页面