github address

Q1:
functions onSubmit () and reset () do code reuse

Q2:
onSubmit () conditional statement looks stupid, can it be optimized

Q3:
Select the date push into the userList object and display undefined

04:
how element-ui displays two input on the same line

05:
how the input of element-ui controls the length

<template>
  <el-tabs v-model="activeName2" type="card">
    <el-tab-pane label="" name="first">

      <!--  -->
    <el-form
      ref="form"
      :model="form" 
      label-width="80px">
      <el-form-item label="">
        <el-col :span="4">
          <el-date-picker 
            type="date" 
            placeholder="" 
            v-model="form.date" 
            style="width: 100%;">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label=""> 
        <el-col :span="6">
          <el-input v-model="form.name"></el-input>
        </el-col>
      </el-form-item>
    <el-form-item label="">
      <el-select v-model="form.province" placeholder="">
        <el-option label="" value=""></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <el-select v-model="form.city" placeholder="" label-width="1px">
        <el-option label="" value=""></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <el-col :span="6">
        <el-input v-model="form.address"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="">
      <el-col :span="6">
        <el-input v-model="form.zip"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit"></el-button>
      <el-button @click="reset"></el-button>
    </el-form-item>
  </el-form>

  <!--  -->
    <hr>

    <!--  -->
    <el-table
    :data="userList"
    style="width: 100%"
    max-height="400">
    <el-table-column
      fixed
      prop="date"
      label=""
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label=""
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label=""
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label=""
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="">
    </el-table-column>
    <el-table-column
      prop="zip"
      label=""
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label=""
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, userList)"
          type="text"
          size="small">
          
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
    <el-tab-pane label="" name="second">
      
    </el-tab-pane>
    <el-tab-pane label="" name="third"></el-tab-pane>
    <el-tab-pane label="" name="fourth"></el-tab-pane>
  </el-tabs>
  
</template>

<script>
  export default {
    data() {
      return {
        activeName2: "first",
        userList:[{}],
        form:{
          date:"",
          name:"",
          province:"",
          city:"",
          address:"",
          zip:""
        }
      };
    },
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      onSubmit(){
        if( this.form.name=="",
            this.form.date=="",
            this.form.name=="",
            this.form.province=="",
            this.form.city=="",
            this.form.address=="",
            this.form.zip==""){
              alert("")
        }else{
          this.userList.push({
          date:this.form.date,
          name:this.form.name,
          province:this.form.province,
          city:this.form.city,
          address:this.form.address,
          zip:this.form.zip,
          });
          this.form.date=""
          this.form.name=""
          this.form.province=""
          this.form.city=""
          this.form.address=""
          this.form.zip=""
        }
      },
      reset(){
        this.form.date=""
        this.form.name=""
        this.form.province=""
        this.form.city=""
        this.form.address=""
        this.form.zip=""
      }
    },
    mounted(){
        this.$http.get("src/userList.json")
        .then((res)=>{
        this.userList = res.data
        console.log(res)
      })
      
    }
  }
</script>
<style>

</style>