如何解决elementUI选择日期push到对象中显示undefined？

Question

如何解决elementUI选择日期push到对象中显示undefined？

CHEN

132718

Jenny

Q1:
函数onSubmit()和reset()做代码重用

Q2:
onSubmit()条件语句显得很笨，能否优化

Q3:
选择日期push到userList对象中，显示undefined

04:
element-ui如何将两个input在同一行显示

05：
element-ui的input如何控制长度

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

图片描述