Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how the ElementUI form is in vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

ElementUI form

The official website of the el form has a lot of content, and I feel tired after looking at it. But in fact, it is very easy to use, el encapsulates a variety of components for us, the style is also popular.

A simple case.

The code is as follows (make sure that the relevant components are introduced when in use)

Log in to cancel export default {data () {return {form: {name:', pwd:''}, methods: {onSubmit () {console.log ('submittance');}

It still looks like a lot, doesn't it? Remove some necessary tags and some declarations, and the rest is: the three components of el-form,el-input,el-form-item. El-form is necessary and has an impact on the layout. El-form-item is the text of the associated form elements, and el-input is our input box. The layout has been preset, and these three can be the most basic forms. Is it convenient?

The main components of the form

Commonly used form components, input box, drop-down box, radio box, multi-box, text field, the corresponding component is: Form,FormItem,Input,Select,Option,Checkbox,Radio.

There are also some practical components, such as switch (Switch), date selector (DatePicker), time selector (TimePicker), single box group (RadioGroup), multi-box group (CheckboxGroup), etc.

The use of form components

No matter which component is the same, first introduce the module into the main.js, and then use it in the page:

/ / main.jsimport {Form,FormItem,Input,CheckboxGroup,Radio, RadioGroup,Switch} from 'element-ui';Vue.use (Form) Vue.use (RadioGroup) Vue.use (Radio) Vue.use (FormItem) Vue.use (Input) / /. What needs to be introduced?

Suppose you use it in form.vue and get tired of reading too much code. I only write a drop-down box, switch, and text field. (it's called xixi.)

Immediately create and cancel export default {data () {return {form: {region:', / / region delivery: whether false,// is delivered in time desc:'/ / activity form description}, methods: {onSubmit () {console.log ('submittal') }}}

The effect is as follows

Inline form

It is not difficult to find that our components are all standing on a single line, and it is easy to make the components into inline elements. Add an attribute to the el-form component: inline= "true" (the value of true is a Boolean only if the attribute is preceded by a colon, otherwise it will be considered a string)

Alignment mode

* * alignment here refers to the text alignment of label. * * also in the label-position attribute of the loaded el-form component

Available value of label-position: left,right,top (top is label at the top, component is displayed below, not on the same line). As follows

Form validation

There are three key points for form validation:

Add to 1.el-form component: rules= "rule group object" attribute is added, and the value is the object of the validation rule

two。 The form component adds a prop attribute to specify validation rules for the component. Prop attribute is added to el-form-item

3. Objects that define validation rules

Validation is generally used in the input box

The code is as follows:

Export default {data () {return {form: {name:', url:'',}, rules: {name: [{required: true, message: 'enter activity name', trigger: 'blur'}, {min: 3, max: 5 Message:'3 to 5 characters', trigger: 'blur'}], u: [{type:' url', required: true, message: 'must be a standard url address', trigger: 'change'}]},}},}}

It is important to mention that if you want to verify the number type, then. You need to replace v-model with vMub model. Numbered numbers. Remember!

Custom validation rules

Custom validation differs from predefined validation in one thing (which three key points are there to test you):

The authoring form of custom rule objects

Export default {data () {let checkNum = (rules,val,callback) = > {rules / / here you will get the property if (! Number.isInteger (val)) of the defined check object {/ / if you want to prompt an error message, call it back through the third parameter Parameter value is Error instance callback (new Error ('please enter a value')}} return {/ / verification rule rules: {u: [{type: 'url', required: true, message:' must be a standard url address', trigger: 'change'} / / add a custom validation The value is function name {validator:checkNum,targger:'change'}],},} component size control in the form

Specify the size of the form element by adding a size attribute to the el-form. It's very simple, as follows

Available values for size: medium / small / mini

The attribute values of the summary form module indicate whether the modelobject form data object rulesobject verification rule inlineBoolean default false is set to the inline element label-positionright/left/top default right form field label alignment label-widthstring such as the width of the 150px tag (label) sizemedium / small / mini form component size status-iconboolean default false displays the icondisabledboolean default false scope for the verification result for the entire form. There is no need to explain the form module's method Form Methods (official documentation, learn about it) the method name describes the parameter validate to verify the entire form, and the parameter is a callback function. The callback function is called after the verification, passing in two parameters: whether the verification was successful or not and the fields that failed the verification. If the callback function is not passed in, a promiseFunction (callback: Function (boolean, object)) validateField method for verifying some form fields Function (props: array | string, callback: Function (errorMessage: string)) resetFields resets the entire form, resets all field values to their initial values and removes the verification result-clearValidate removes the verification result of a table item. Pass in the prop attribute of the form item to be removed or an array of prop, and if not, remove the verification result Function (props: array | string) of the entire form.

How to use these methods?

/ / reset the parameter values of the attribute parameters of the form const from = this.$refs.f.resetFields () form-item module indicating the fields that propstring passes into model. In the case of validate, resetFields methods, this attribute is a required labelstringtag textlabel-widthstring such as 150px. Whether the frame occupied by the label requiredboolean is required rulesobject form verification rules sizemedium / small / mini component size show-messageboolean default true display verification error message inline-messageboolean default false displays verification information in-line form "how is the ElementUI form in vue" this is the end of the introduction, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.