elmentUI 开始结束时间

 正常来说开始结束时间，我们在数据库里面设计一般为俩个字段，但是在elmentUI组件在开始结束至的时候是用一个字段显示，那需要怎么做呢？

 解决方法如下

 <template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      @change="getDate"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>
    {{value1}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: ""
    };
  },
  methods: {
    getDate() {
      console.log(this.value1[0]);
      console.log(this.value1[1]);
    }
  }
};
</script>

   但是这样就结束了吗? 注意这个只是在选择的时候将值赋值给开始和结束方法，我们插入到数据库后，需要重新查询出来，这个时候需要在query后将开始和结束时间又要赋值给 value1方法

  代码如下：

  

temp: {
        payDateInnerRange: [],
        settleDateInnerRange: []
      },  




<el-col :span="5" class="text-left margin-bottom-5">
                <el-form-item prop="payDateInnerRange">
                  <el-date-picker
                    v-model="temp.payDateInnerRange"
                    type="daterange"
                    range-separator="至"
                    @input="getPayDateRange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>


 getPayDateRange(e) {
      this.temp.payDateInnerRange = e;
      this.$set(this.temp,"payDateInnerRange", e);
      if (this.temp.payDateInnerRange[0]) {
        this.temp.firstPayStartTime = this.temp.payDateInnerRange[0];
        this.temp.firstPayEndTime = this.temp.payDateInnerRange[1];
      }
    },

 if (row.firstPayStartTime != null) {
        this.temp.payDateInnerRange[0] = this.getDateTimeStr(
          row.firstPayStartTime
        );
        this.temp.payDateInnerRange[1] = this.getDateTimeStr(
          row.firstPayEndTime
        );
      }