el-date-picker对应开始时间和结束时间，清除报错解决

1、el-date-picker要对应开始时间和结束时间 

Element - The world's most popular Vue UI framework  官方文档中 v-model 绑定的是字符串

要求是对应开始时间和结束时间：

1.1 解决方案：给 el-date-picker 的 v-model 绑定自定义数组

data() {
  return {
      releaseTime: [], // 发布时间  
  }
}

1.2 代码片单

模版部分:

<el-date-picker
  v-model="releaseTime"
  :clearable="false"
  type="datetimerange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  format="yyyy-MM-dd HH:mm:ss"
  value-format="yyyy-MM-dd HH:mm:ss"
  @change="getReleaseTimeFn"/>

 1.3 methods方法

methods: {
   getReleaseTimeFn() {
      if (this.releaseTime.length) {
        // 取值
        this.dialogForm.publishStartTime = this.releaseTime[0]
        this.dialogForm.publishEndTime = this.releaseTime[1]
      } else {
        this.dialogForm.publishStartTime = ''
        this.dialogForm.publishEndTime = ''
      }
}

 2、关于 el-date-picker 的表单验证问题：

//data数据

dialogForm: {
        id: null,
        systemType: null, // 系统(1:玩家端,2:门店端,3:发行端)
        title: '', // 标题
        content: '', // 内容
        publishStartTime: '', // 发布开始时间（yyyy-MM-dd HH:mm:ss）
        publishEndTime: '' // 发布结束时间（yyyy-MM-dd HH:mm:ss）
      },

// 规则验证

rules: {
        publishEndTime: [
          { required: true, message: '请选择发布时间', trigger: 'change' },
          { validator: changeEndTime, trigger: 'change' }
        ]
      }

//自定义验证方法

  const changeEndTime = (rule, value, callback) => {
      if (this.dialogForm.publishEndTime !== '') {
        const endTime = this.$moment(this.dialogForm.publishEndTime).format('x')
        const time = new Date()
        const newTime = this.$moment(time).valueOf()
        if (newTime > endTime) {
          callback(new Error('结束时间必须晚于当前时间'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }

3、清空时间控件报错问题解决

3.1 这样取值赋值都没有问题，但是选择完时间点击清除按钮会报错，如下图：

3.2 原因是点击清空的时候，将这个数组直接等于 null ，而不是给清空成空数组，监听打印查看一下

 watch: {
    releaseTime: {
      handler: function(newVal, oldVal) {
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      },
      deep: true
    }
  },

3.3 解决方案：监听，如果清空等于null时，给数组赋值个空数组即可

  watch: {
    releaseTime: {
      handler: function(newVal, oldVal) {
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
        if (newVal === null) {
          this.releaseTime = []
        }
      },
      deep: true
    }
  },

有更好的见解，请留言讨论！！ 喜欢的话，别忘记一键三连哦~~