element-ui库的表单元素的总结

5,195 阅读6分钟

表单元素挺多的,这里简单总结下,我以我的方式主要分为:文本框类、选择类、其他类

  • 文本框类
  • 选择类
  • 其他类

TL;DR

  • 时间类的选择器,均可设置输入框的显示样式和值的形式,属性分别为format、value-format
  • 单选框和复选框,选中项属性的label值就是model的值
  • 复选框,如果是多选的话,务必设置model值是数组

文本框类

文本框

这里我统一将有文本框的元素放在一起。主要有:普通文本框、密码框、文本域、计数器、日期选择器、自动填充文本框、有前缀的文本框。

  • 普通文本框:disabled是否禁用,clearable是否可清空,maxlength/minlength字符的长度,show-word-limit显示字数统计,prefix-icon/suffix-icon首尾部的显示图标,size指定输入框的尺寸(large small mini), <el-input v-model="xx" placeholder="请输入内容" disabled clearable maxlength="10" show-word-limit prefix-icon="el-icon-search" suffix-icon="el-icon-date" size="mini">
  • 密码框:必须有show-password
    <el-input show-password v-model="xx" placeholder="请输入内容" >
  • 文本域:必须有type="textarea",rows控制高度(注意是数字,需要加:),autosize让高度根据内容自行调整(还可设置最小行数和最大行数) <el-inut type="textarea" v-model="xx" :rows="2" autosize>
  • 计数器:仅允许输入标准的数字值,方便的加减数字,min/max控制最大最小值,steps控制步长
    <el-input-number v-model="num" :min="1" :max="10" :steps="2"></el-input-number>
  • 复合型输入框:可前置或后置元素(slot)
  <el-input placeholder="请输入内容" v-model="xx">
    <template slot="prepend">Http://</template>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
  • 带输入建议的输入框,较复杂需要再看吧,el-autocomplete

  • 日期选择器,有点麻烦,单独一部分讲

日期时间选择器

这里特别强调的是:输入框里显示的格式(format)和绑定值的格式(value-format)可以控制!!!!
这里特别强调的是:输入框里显示的格式(format)和绑定值的格式(value-format)可以控制!!!!
这里特别强调的是:输入框里显示的格式(format)和绑定值的格式(value-format)可以控制!!!!

年是yyyy,月是MM,日是dd,时是HH,分是mm,秒是ss,周是WW(只限于周选择器)。通用的是yyyy-MM-dd HH:mm:ss

注意的坑:

  • 除了年,都可以单个,单个表示一位数的时候不补0。
  • HH是24小时制,hh是12小时制!!!!
  • value-format有个特殊的timestamp类型,format有A类型(AM/PM)
  • 不设置value-format,默认是这种Fri Oct 18 2019 11:27:54 GMT+0800 (China Standard Time),通常会设置成timestamp,13位的
  • 开始和结束选择的值是数组

选择的类型如下:

  • 时间选择器:picker-options设置选择的范围。 <el-time-picker v-model="xx" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="选择时间">
  • 开始和结束时间选择器:必须有is-range属性,align对齐方式,range-separator分隔符,默认是-,start-placeholder和end-placeholder, <el-time-picker is-range v-model="value1" align="center" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-time-picker>
  • 日期选择器:必须要type,控制类型(date、week、month、year、dates) <el-date-picker type="date" v-model="value1" placeholder="选择日期"> </el-date-picker>
  • 开始和结束日期选择器:必须type,控制类型(daterange、weekrange、monthrange、yearrange)
    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
  • 日期时间选择器:必须type="datetime"
    <el-date-picker type="datetime" v-model="value1" placeholder="选择日期时间"> </el-date-picker>
  • 开始和结束日期时间选择器:必须type="datetimerange",default-time可以设置默认时间 <el-date-picker type="datetimerange" v-model="value1" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>

选择类

所有的选择类的表单元素,都有类似于options的选项,注意model的值和选项中的那个属性值挂钩。
option基本统一的模式是{label:'看到的',value:'提交给后台的值'},但是radio和chebox很奇怪,label的选项居然就是value,写的时候特别注意!!!

  • 单选框:model绑定的值是选中项的label值,model值就是默认项,undefined就没有默认项。border就会有边框。想要变成按钮样式的就用el-radio-button
  <!-- options: [{ value:1, label: '黄金糕' }, { value:1, label: '双皮奶' }] -->
  <el-radio-group v-model="radio">
    <el-radio v-for="item in options" :key="item.value" :label="item.value" >{{item.label}}</el-radio>
  </el-radio-group>
  • 复选框:model的值有两种类型:Boolean和Array。Boolean的时候就是,选项是否都勾选。Array的时候,选中项的label值会出现在数组中。indeterminate是true的时候是表示部分选中,用于实现全选的效果。border是带上边框 el-checkbox-group标签,min和max表示勾选项目的数量,size是尺寸,el-checkbox-button是按钮形式

<el-checkbox v-model="checked" indeterminate>全选</el-checkbox>

  <el-checkbox-group v-model="checkList">
    <!-- options: [{ value:1, label: '黄金糕' }, { value:1, label: '双皮奶' }] -->
    <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>
  • 下拉框:model的值是选中的option的value值,disabled设置不能选。需要分组用el-option-group,远程搜索和创建条目参考官网 el-select可设置:clearable清空,multiple多选(多选的时候值请务必是数组),filterable可以搜索选项 el-option可设置:slot设置自定义的样式
  <!-- options: [{ value:1, label: '黄金糕' }, { value:1, label: '双皮奶' }] -->
  <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>
  • 级联下拉框:model是数组,索引对应级别。options是类似于递归的模式([{value:1,label:'bj',children:[{value:2,label:'haidian'}]}]),默认触发方式是click,可以hover:props={expandTrigger:'hover'}
    <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>

其他类

  • 开关:model值是Boolean,可以使用active-color属性与inactive-color属性来设置开关的背景色 <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>

  • 滑块:默认是0-100,可以formatTooltip格式化显示的值 <el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider>

  • 评分、颜色、穿梭框、没用,用的时候再说吧~~

  • 上传:挺复杂的,这边我只是简单罗列下我知道的。accept限制上传文件的格式,auto-upload要不要自动上传,limit上传的数量,file-list文件显示的列表,list-type显示的方式,on-exceed超出了文件数的钩子,on-change文件变化的钩子,on-remove的移除文件的钩子。钩子的默认参数大多有file,filelist

    • file-list一般可能需要用computed算出来,因为在编辑状态下,应该直接有图片链接。
    • 第一个文件可以通过this.$refs.eventImage.uploadFiles[0].raw
    • 校验的时候,有时不一定能准确判断file的值存不存在,需要手动设置规则,每次上传之后。上传同一个图片可能不行的bug需要每次上传之后设置this.$refs[ref名].value = '' <el-upload ref="eventImage" accept="image/*" :auto-upload="false" action="" :limit="1" :file-list="fileListUploaded" list-type="picture-card" :on-exceed="exceedFile" :on-change="changeFile" :on-remove="removeImage" ></el-upload>