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 code

The data form in data should be written like this

form:{
    username:' '.password:' ',}Copy the code
1.2 Adding validation rules to forms Note that prop is written inel-form-itemIn the
<el-form  :rules="rules">
    <el-form-item label="Username" prop="name">//name is set in rules<el-input v-model="form.username"></el-input>
    </el-form-item>
</el-form>
Copy the code

The data in data is written like this

 rules: {
        name: [{required: true.message: 'Please enter a user name'.trigger: 'blur'},],},Copy the code
1.3 Forms are usually prevalidated before submission
<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">Immediately create</el-button>
    </el-form-item>
</el-form>
<script>
  export default {
      methods: {submitForm(){
               this.$refs.form.validate(valid= >{
               if(valid) this.$message.success('Submitted successfully')})}}}Copy the code
1.4 Resetting the form
<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="resetForm">Immediately create</el-button>
    </el-form-item>
</el-form>
<script>
  export default {
      methods: {resetForm() {
                this.$refs.form.resetFields(); }}}Copy 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-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 at least 18 years old'));
            } else{ callback(); }}},1000);
      };
      var validatePass = (rule, value, callback) = > {
        if (value === ' ') {
          callback(new Error('Please enter your password'));
        } else {
          if (this.ruleForm.checkPass ! = =' ') {
            this.$refs.ruleForm.validateField('checkPass'); } callback(); }};var validatePass2 = (rule, value, callback) = > {
        if (value === ' ') {
          callback(new Error('Please enter your password again'));
        } else if(value ! = =this.ruleForm.pass) {
          callback(new Error('Two input passwords are inconsistent! '));
        } else{ callback(); }};return {
        rules: {
          pass: [{validator: validatePass, trigger: 'blur'}].checkPass: [{validator: validatePass2, trigger: 'blur'}].age: [{validator: checkAge, trigger: 'blur'}}}; }},Copy the code
1.6 Dynamically add and subtract forms

By default, the width of the el-form-item label is zero and does not inherit the label-width of the el-Form. You can set the label-width property separately if desired.

Table 2

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

2.1 Basic Usage
 <template>
    <el-table :data="tableData">//data Binds data<el-table-column prop="date" label="Date"></el-table-column>//label is the first row of the table, the header of the table<el-table-column prop="name" label="Name"></el-table-column>//prop displays data,</el-table>
  </template>
  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02'.name: 'Wang Xiaohu'}, {date: '2016-05-04'.name: 'Wang Xiaohu',}]}}}</script>
Copy the code
2.2 style

With zebra: Just add a stripe to the El-table

Border: Just add a border to the el-table

Width: each el-table-column,

2.3 table Displays the use of columns and scope slots
<template>
  <el-table :data="tableData">
    <el-table-column type="expand">
      <template slot-scope="props">
            <span>{{ props.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="Product ID" prop="id"></el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122'.name: 'Eggs with Good Flavor',}]}}}</script>
Copy the code

Other components in a subsequent article…