1, forms,

Forms are often used to submit data such as user registration and login

1.1 Form binding data
<el-form :model="form" :rules="rules"> <el-form-item label=" username">< el-input V-model ="form.username"></el-input> </el-form-item> </el-form> Copy the codeCopy the code

The data form in data should be written like this

Form :{username:'', password:'',Copy the code
Note that prop is written inel-form-itemIn the
<el-form :rules="rules"> <el-form-item label=" user name" prop="name" V -model="form.username"></el-input> </el-form-item> </el-formCopy the code

The data in data is written like this

Rules: {name: [{required: true, message: 'Please enter user name ', trigger: 'blur'},],}, copy codeCopy the code
1.3 Pre-validation of forms is usually performed before they are submitted
<el-form :model="form" :rules="rules" ref="form"> <el-form-item label=" username "> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm"> </el-button> </el-form-item> </el-form> <script> export default {methods:{submitForm(){ $refs.form.validate(valid=>{if(valid) this.$message.success(' submitted successfully ')})}}} Copy the codeCopy the code
1.4 Resetting forms
<el-form :model="form" :rules="rules" ref="form"> <el-form-item label=" username "> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item> <el-button type="primary" </el-form> </el-form> </el-form> <script> export default {methods:{resetForm() { this.$refs.form.resetFields(); }}} Copy the codeCopy the code
1.5 Customizing Form validation Rules
<el-form :rules="rules" ref="ruleForm" label-width="100px" > <el-form-item label=" password "prop="pass"> <el-input > < / el - input > < / el - form - item > < el - form - the item label = "age" prop = "age" > < el - input > < / el - input > < / el - form - item > < / el - form > <script> export default { data() { var checkAge = (rule, value, callback) => { if (! Value) {return callback(new Error(' age cannot be empty ')); } setTimeout(() => { if (! Number.isinteger (value)) {callback(new Error(' please enter a numeric value ')); } else {if (value < 18) {callback(new Error(' must be over 18 ')); } else { callback(); }}}, 1000); }; Var validatePass = (rule, value, callback) => {if (value === ") {callback(new Error(' please enter password ')); } else { if (this.ruleForm.checkPass ! == '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); }}; Var validatePass2 = (rule, value, callback) => {if (value === ") {callback(new Error(' please enter password again ')); } else if (value ! == this.ruleform.pass) {callback(new Error(' password difference! ')); } else { callback(); }}; return { rules: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; },} copy the codeCopy the code
1.6 Dynamically adding or subtracting forms

The el-form-item label width is zero by default, and does not inherit the el-Form’s label-width. You can set a separate label-width attribute for it if desired.

2

The table is divided into two parts, el-Table and el-table-column

2.1 Basic Usage
<template> <el-table :data="tableData"> <el-table-column prop="date" label=" date" ></el-table-column> // Label is the first row of the table, <el-table-column prop="name" label=" name" ></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: 'x.h.'}, {date: '2016-05-04', name: 'x.h.'}]}}} < / script > duplicate codeCopy the code
2.2 style

With zebra stripes: Just add a stripe to el-table

Border: add border to el-table

Width: each el-table-column,

2.3 Use of table expansion columns and scope slots
<template> <el-table :data="tableData"> <el-table-column type="expand"> <template slot-scope="props"> <span>{{ </span> </template> </el-table-column> <el-table-column label=" prop=" ID" ></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ id: '12987122', name: </script> </scriptCopy the code

Other components will be included in a subsequent article…