Element-ui 日期选择器切换类型(type)

记录一下，爬了很多坑，多写了好多代码

切换快捷方式可以切换范围和单天的选择

  <el-date-picker
      ref="picker"
      v-model="pickerDate"
      :type="type"
      :key="type" <!-- 注意这里，添加key -->
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    />
  data() {
    return {
      pickerDate: '',
      type: 'date',
      pickerOptions: {
        shortcuts: [{
          text: '实时',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '单天',
          onClick: picker => { //注意箭头函数，否则this指向有问题
            this.changeType('date')
          }
        }, {
          text: '范围',
          onClick: picker => {
            this.changeType('daterange')
          }
        }]
      }
    }
  },
  methods: {
    changeType(type) {
      this.type = type
      this.pickerDate = '' //清空选择，否则切换会报错
      this.$nextTick(() => { //注意nextTick在切换类型dom更新后再获取焦点打开选择面板，否则不会生效，一生的痛啊，写了一大堆NC代码
        this.$refs.picker.focus()
      })
    }
  }