Vue element el-date-picker 时间组件类型切换报错，以及下拉框错位

本文链接：https://blog.csdn.net/weixin_47309568/article/details/128677748

修改时间组件type下拉框错位

解决方法：

使用两个时间组件进行v-show切换
在时间组件上添加key值，在切换时间组件type值时同时修改key值

另外在时间组件上添加：key也会让picker-options正常，在设置不能选择当前时间之后的时间，设置key后切换类型因为key不同所以会重新渲染

切换完时间组件type再选择时间会报错

在这里插入图片描述
目前使用遇到的是在时间组件上添加value-format时切换type选择时间会报错没设置value-format不会报错

解决方法：

切换type的按钮添加点击事件，在切换时使用moment插件或者手写时间格式化方法，对时间组件上绑定的v-model数据进行重新赋值，赋值格式为当前时间组件的value-format格式。
另一种是不使用value-format，在提交表单时根据当前用户选择的类型格式化时间为对应的时间格式

在这里插入图片描述
template代码

<el-date-picker :key="timeType[isTimeType].type" v-model="dateTime" :clearable="false"
                          :picker-options="pickerOptions" :type="timeType[isTimeType].type"
                          :value-format="timeType[isTimeType].format"
                         @change="timeChange">
</el-date-picker>
<div>
  <span v-for="(v,i) in timeType" :key="v.type" @click="timeTypeHandle(i,v)">{{ v.title }}</span>
</div>

javascript代码

data() {
  return {
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
    },
    timeType: [
      {title: '年', type: 'year', format: 'yyyy'},
      {title: '月', type: 'month', format: 'yyyy-MM'},
      {title: '日', type: 'date', format: 'yyyy-MM-dd'}
    ],
    isTimeType: 0,
    dateTime: new Date(),
  }
},
methods: {
	timeChange() {
      console.log(this.dateTime)
    },
	timeTypeHandle(index, item) {
	  this.dateTime = moment(this.dateTime).format(item.format.toUpperCase());
	},
}