element的用法,elementui表单
有很多种形式。摘要：本文主要介绍了元素的表单元素的使用总结，包括文本框类、选择类和其他类，具有一定的参考价值。有兴趣的可以看看。
表格还挺多的。这里简单总结一下，我主要按照我的方式分为文本框类、选择类和其他类。
类别文本框
选择类别
其他类别
TL;DR
类选择器，可以设置输入框的显示样式和值形式。这些属性分别是格式和值格式。
单选框和复选框，所选项目属性的标签值就是模型的值。
复选框，如果是多选，一定要将模型值设置为数组。
文本框类
在这里，我将带有文本框的元素放在一起。有：普通文本框、密码框、文本字段、计数器、日期选择器、自动填充文本框、前缀文本框。
普通文本框：禁用与否，可清除与否，maxlength/minlength字符的长度，show-word-limit显示字数，前缀-图标/后缀-图标显示开头和结尾的图标，size指定输入框的大小(大小mini)，
El-input v-model= xx placeholder=请输入内容 disabled clear maxlength= 10 show-word-limit prefix-icon= El-icon-search suffix-icon= El-icon-date size= mini
密码框：显示-密码是必需的。
El-input show-password v-model= xx placeholder=请输入内容
Text:必须有type=textarea ，rows控制高度(注意是数字，需要加：)，autosize允许高度根据内容自行调整(也可以设置最小和最大行数)。
El-inut type= textarea v-model= xx :rows= 2 autosize
计数器：只允许输入标准数字值，可以方便地加减数字，min/max控制最大值和最小值，steps控制步长。
El-输入编号v-model= num :min= 1 :max= 10 :steps= 2 /El-输入编号
复合输入框：前部或后部元素(插槽)
El-input占位符=请输入内容 v-model=xx
模板slot=prependHttp:///template
El-button slot= append icon= El-icon-search /El-button
/el-input
带有建议的输入框。很复杂。让我看看，自动完成。
日期选择器，有点麻烦。一个人说。
日期时间选择器
这里强调一下，输入框显示的格式和绑定值的格式(value-format)是可以控制的！
这里强调一下，输入框显示的格式和绑定值的格式(value-format)是可以控制的！
这里强调一下，输入框显示的格式和绑定值的格式(value-format)是可以控制的！
年是yyyy，月是mm，日是dd，小时是HH，分钟是MM，秒是ss，周是WW(仅限周选择器)。通用是yyyy-MM-dd HH:mm:ss。
注意坑：
除了年份，可以单身。当单个数字表示单个数字时，不加0。
Hh是24小时制，HH是12小时制！
值格式有一个特殊的时间戳类型，格式有一个类型(AM/PM)。
如果没有设置value-format，默认为this fri oct 18 2019 11:27:54 GMT 0800(中国标准时间)，通常设置为timestamp，13位。
开始和结束选择的值是数组。
选择类型如下：
时间选择器：picker-options设置选定的范围。
El-time-picker v-model= xx :picker-options= {可选范围： 18:30:00-20:30:00 } placeholder= select time
以及开始和结束时间选择器：必须有is-range属性，align对齐，range-separator分隔符，默认值为-，start-placeholder，end-placeholder。
El-time-picker is-range v-model= value 1 align= center range-separator= to start-placeholder= start time end-placeholder= end time /El-time-picker
日期选择器：类型是必需的，控件类型(日期、周、月、年、日期)
El-date-picker type= date v-model= value 1 placeholder= selected date /El-date-picker
开始和结束日期选择器：必须是类型，控制类型(日期范围、周范围、月范围、年范围)。
El-date-picker v-model= value 1 type= date range range-separator= to start-placeholder= start date end-placeholder= end date /El-date-picker
日期时间选择器：必须是type=datetime
El-date-picker type= datetime v-model= value 1 placeholder= select date and time /El-date-picker
以及开始和结束日期和时间选择器：必须是type=datetimerange ，default-time可以设置默认时间。
El-date-picker type= datetime range v-model= value 1 range-separator= to start-placeholder= start date end-placeholder= end date /El-date-picker
选择类
selection类的所有表单元素都有类似于options的选项。请注意，模型的值与选项中的属性值相关联。
option的基本统一模式是{label: seen 和value: submitted to the background }，但是radio和chebox就很奇怪了。标签的选项其实是值，写的时候要特别注意！
单框：模型绑定的值是选中项的标签值，模型值是默认项，undefined没有默认项。边界会有边界。使用el单选按钮，如果你想改变成按钮风格。
！-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
复选框：有两种类型的模型值：布尔值和数组。当所有选项都被选中时为布尔值。数组中，选定项的标签值将出现在数组中。当不确定为真时，表示部分选择，用来达到全选的效果。边框有边框。
El-checkbox-group label，min和max表示选中项目的数量，size是大小，el-checkbox-button是按钮形式。
El-checkbox v-model= checked 不确定全选/el-checkbox
el-checkbox-group v-model=清单
！-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
下拉框：型号的值是所选选项的值，禁用的设置不能选择。El-option-group用于分组、远程搜索和创建引用官方网站的条目。
El-select可以设置：clear为清除，multiple为选择(选择multiple时，值必须是数组)，filterable为搜索选项。
El选项可设置：插槽设置自定义样式。
！-options: [{value: 1，label:黄金蛋糕 }，{value: 1，label:双皮奶 }]--
El-select v-model= value placeholder=请选择
el-option v-for=选项中的项目:key= item . value :label= item . label :value= item . value /El-option
/el-select
级联下拉框：模型是数组，索引对应级别。Options是类递归模式([{value: 1，label: BJ ，children: [{value: 2，label:海淀 }])，默认触发模式是click，可以悬停：props={expand trigger: hover}
El-cascader v-model= value :options= options @ change= handle change /El-cascader
其他类
开关：模型值为布尔值，您可以使用active-color属性和inactive-color属性来设置开关的背景色。
el开关v-model= value active-color= # 13ce 66 inactive-color= # ff 4949 /El开关
Slider:默认值为0-100，显示的值可以通过formatTooltip进行格式化。
El-slider v-model=“value 1”:format-tooltip=“format tooltip”/El-slider
评级，颜色，梭箱，没用，用的时候再说吧~ ~
上传：挺复杂的。这里我只是简单列举一下我所知道的。接受限制上传文件的格式，是否应该自动完成自动上传，上传文件的数量是有限的，由文件列表文件显示的列表，列表类型显示的方式，超过文件数量的挂钩，改变文件时改变的挂钩，以及移除文件时移除文件的挂钩。钩子的大多数默认参数是file，filelist。
一般来说，file-list可能需要通过computed来计算，因为在编辑状态下，应该有一个直接指向图片的链接。
第一个文件可以通过这个访问。$ refs.eventage.uploadfiles [0]。生的
检查时，有时不一定能准确判断文件的值是否存在。您需要手动设置规则。每次上传后。上传相同的图片可能不工作的错误需要设置这个。$refs[ref name ]。值=
El-upload ref= event image accept= image/* :auto-upload= false action= :limit= 1 :file-list= fileListUploaded list-type= picture-card :on-exceed= exced file :on-change= change file :on-remove= remove image /El-upload
以上就是本文对元素表单使用的总结。有关元素表单的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。