Summary of the use of element's form elements

There are many form elements. Here is a brief summary. In my way, I mainly divide them into: text box class, selection class, and other classes.

• Text box class
• Select Class
• Other categories

TL;DR

• For time selectors, you can set the display style and value format of the input box. The attributes are format and value-format.
• For radio buttons and check boxes, the label value of the selected item attribute is the value of the model
• Checkbox, if it is multiple selection, be sure to set the model value to an array

Text box class

Here I put the elements with text boxes together. The main ones are: normal text box, password box, text field, counter, date picker, auto-fill text box, and text box with prefix.

Ordinary text box: disabled is disabled, clearable is clearable, maxlength/minlength character length, show-word-limit displays word count, prefix-icon/suffix-icon displays icons at the beginning and end, size specifies the size of the input box (large small mini),

<el-input v-model="xx" placeholder="Please enter content" disabled clearable maxlength="10" show-word-limit prefix-icon="el-icon-search" suffix-icon="el-icon-date" size="mini">

Password box: must have show-password

<el-input show-password v-model="xx" placeholder="Please enter content" >

Text area: must have type="textarea", rows controls the height (note that it is a number and needs to be added with :), autosize allows the height to adjust automatically according to the content (you can also set the minimum and maximum number of rows)

<el-inut type="textarea" v-model="xx" :rows="2" autosize>

Counter: only standard numeric values ​​are allowed, convenient addition and subtraction of numbers, min/max controls the maximum and minimum values, steps controls the step length

<el-input-number v-model="num" :min="1" :max="10" :steps="2"></el-input-number>

Composite input box: elements can be placed before or after (slot)

  <el-input placeholder="Please enter content" v-model="xx">
    <template slot="prepend">Http://</template>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>

Input box with input suggestions, more complex, please see el-autocomplete

The date picker is a bit tricky, so I'll talk about it in a separate section.

Date time picker

What is particularly emphasized here is that the format displayed in the input box (format) and the format of the bound value (value-format) can be controlled! ! ! !
What is particularly emphasized here is that the format displayed in the input box (format) and the format of the bound value (value-format) can be controlled! ! ! !
What is particularly emphasized here is that the format displayed in the input box (format) and the format of the bound value (value-format) can be controlled! ! ! !
Year is yyyy, month is MM, day is dd, hour is HH, minute is mm, second is ss, week is WW (only for week selector). The commonly used one is yyyy-MM-dd HH:mm:ss.

Note the pitfalls:

• Except for the year, any number can be a single digit. When a single digit is used to represent a single digit, no 0 is added.
• HH is 24-hour format, hh is 12-hour format! ! ! !
• value-format has a special timestamp type, format has type A (AM/PM)
• If value-format is not set, the default is Fri Oct 18 2019 11:27:54 GMT+0800 (China Standard Time), which is usually set to timestamp, 13 digits.
• The values ​​of the start and end selections are arrays

The types to choose from are:

Time selector: picker-options sets the selected range.

<el-time-picker v-model="xx" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="Select time">

Start and end time selectors: must have is-range attribute, align alignment, range-separator separator, the default is -, start-placeholder and end-placeholder,

<el-time-picker is-range v-model="value1" align="center" range-separator="to" start-placeholder="start time" end-placeholder="end time"></el-time-picker>

Date selector: type is required, control type (date, week, month, year, dates)

<el-date-picker type="date" v-model="value1" placeholder="Select a date"> </el-date-picker>

Start and end date selectors: required type, control type (daterange, weekrange, monthrange, yearrange)

<el-date-picker v-model="value1" type="daterange" range-separator="to" start-placeholder="start date" end-placeholder="end date"> </el-date-picker>

Date time picker: must be type="datetime"

<el-date-picker type="datetime" v-model="value1" placeholder="Select date time"> </el-date-picker>

Start and end date time selector: must be type="datetimerange", default-time can set the default time

<el-date-picker type="datetimerange" v-model="value1" range-separator="to" start-placeholder="start date" end-placeholder="end date"> </el-date-picker>

Select Class

All select form elements have options similar to options. Note that the value of the model is linked to the attribute value in the option.
The basic unified pattern of option is {label:'what you see', value:'the value submitted to the background'}, but radio and chebox are very strange, the label option is actually the value, so pay special attention when writing! ! !

Radio button: The value bound to model is the label value of the selected item. The model value is the default item. If undefined, there is no default item. border will have a border. If you want to turn it into a button style, use el-radio-button

  <!-- options: [{ value:1, label: 'Golden Cake' }, { value:1, label: 'Double Skin Milk' }] -->
  <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>

Checkbox: The model value has two types: Boolean and Array. For Boolean, it means whether all options are checked. Array, the label value of the selected item will appear in the array. When indeterminate is true, it indicates partial selection, which is used to achieve the effect of selecting all. border is the border
el-checkbox-group tag, min and max indicate the number of checked items, size is the size, and el-checkbox-button is the button form

<el-checkbox v-model="checked" indeterminate>Select all</el-checkbox>
  <el-checkbox-group v-model="checkList">
    <!-- options: [{ value:1, label: 'Golden Cake' }, { value:1, label: 'Double Skin Milk' }] -->
    <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>

Drop-down box: The value of model is the value of the selected option. The disabled setting cannot be selected. If you need to group, use el-option-group. For remote search and creation of entries, refer to the official website
el-select can be set: clearable to clear, multiple to select multiple options (the value must be an array when selecting multiple options), filterable to search for options
el-option can be set: slot sets a custom style

  <!-- options: [{ value:1, label: 'Golden Cake' }, { value:1, label: 'Double Skin Milk' }] -->
  <el-select v-model="value" placeholder="Please select">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
  </el-select>

Cascading drop-down box: model is an array, and the index corresponds to the level. options is similar to the recursive mode ([{value:1,label:'bj',children:[{value:2,label:'haidian'}]}]), the default trigger is click, you can hover: props={expandTrigger:'hover'}

<el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>

Other categories

Switch: The model value is Boolean. You can use the active-color and inactive-color attributes to set the background color of the switch.

<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>

Slider: The default is 0-100, you can use formatTooltip to format the displayed value

<el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider>

Rating, color, shuttle frame, useless, I'll talk about it when I use it~~

Upload: It's quite complicated, I'm just going to list what I know here. accept limits the format of uploaded files, auto-upload whether to upload automatically, limit the number of uploads, file-list displays the list of files, list-type displays the method, on-exceed exceeds the number of files, on-change changes the file, and on-remove removes the file. The default parameters of hooks are mostly file and filelist.

• The file-list may generally need to be calculated using computed, because in the editing state, there should be direct image links.
• The first file can be uploaded via this.$refs.eventImage.uploadFiles[0].raw
• When verifying, it is sometimes not possible to accurately determine whether the value of the file exists, and it is necessary to manually set the rules after each upload. To fix the bug that uploading the same image may not work, you need to set this.$refs[ref name].value = '' after each upload.

<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>

This concludes this article on the summary of the use of element form elements. For more relevant element form content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!