elementui 组件英文提示 element有哪些组件

转载

mob64ca14085c24 2024-02-18 17:32:31

文章标签 elementui 组件英文提示 vue.js javascript ecmascript 数据 文章分类 机器学习人工智能

el-tree 树形控件

<el-tree
      // 要在此组件内渲染的数据
      :data="data"

      // 指定树节点的属性值
      :props="defaultProps"

     // 是否展开所有的子节点
      :default-expand-all="true"

     // 只有在点击节点箭头才能展开子节点
      :expand-on-click-node="false"

     // 当点击节点时会回调
      @node-click="handleNodeClick"
    >
</el-tree>

el-table 表格

// element-ui 表格控件 
<el-table 

// 对应的数据
:data="employList">

// 表格的一列
<el-table-column

// 这一列的数据 
prop="username"

// 这一列的表头
 label="姓名" />

</el-table>

el-pagination 分页组件

<el-pagination
            
            // 当前页数，支持.sync
            :current-page="queryObj.page"

            // 当前显示几条数据
            :page-sizes="[5, 7, 10, 15]"

             // 给分页按钮添加背景色
            :background="true"

            // 总共是多少条数据
            :total="total"

            // 每页显示多少条，支持.sync
            :page-size="queryObj.pagesize"

            // 分页的要显示和使用的组件，组件布局，子组件名用逗号分隔
            layout=" sizes,prev, pager, next"

            // 当前页改变时触发
            @current-change="hCurrent"

           // 每页条数改变时触发
            @size-change="handleSizeChange"
          />

el-form 表单

<el-form 

   // 相当于在这里定义了一个类名，可以通过 this.$refs     在script中调用
   ref="userForm"

 // 响应式，表单数据对象
 :model="userInfo"

 // 表单校验，	表单验证规则
 :rules="rules"

 // 宽度
 label-width="220px">

 // 表单中的一项
   <el-form-item 

 // 标题
label="姓名" 

// 	表单域 model 字段，传入 Form 组件的 model 中的字段
prop="username">


// 和 input 没什么区别
 <el-input 

// 一个响应式的语法糖，相当于 :value和@input
v-model="userInfo.username" 

// 占位符
placeholder="请输入姓名" 

// 	用于控制该表单域下组件的尺寸
size="mini" 

// 处理样式
class="inputW" />

</el-form-item>

</el-form>

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属性
回显：

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）