动态切换年月日

<template>
  <div>
    <Select
      style="max-width: 240px; width: 100%"
      v-model="selectData"
      @on-change="selectChange"
    >
      <Option v-for="item in dateList" :value="item.value" :key="item.value"
        >{{ item.label }}
      </Option>
    </Select>

    <DatePicker
      :type="dateType"
      placeholder="请选择"
      style="max-width: 240px; width: 100%"
      v-model="formData.statisticalDate"
      transfer
    ></DatePicker>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      selectData: "01",
      dateList: [
        {
          label: "年",
          value: "01",
          format: "YYYY",
          formatData: "yyyy",
          type: "year",
        },
        {
          label: "月",
          value: "02",
          format: "YYYY-MM",
          formatData: "yyyy-MM",
          type: "month",
        },
        {
          label: "日",
          value: "03",
          format: "YYYY-MM-DD",
          formatData: "yyyy-MM-dd",
          type: "date",
        },
      ],
      dateType: "year",
      formData: {
        statisticalDate: "",
      },
    };
  },
  created() {
    this.formData.statisticalDate = dayjs(`${new Date()}`).format("YYYY");
  },
  methods: {
    selectChange(e) {
      console.log(e);
      this.dateList.forEach((item) => {
        if (item.value == e) {
          this.format = item.format;
          this.formatData = item.formatData;
          this.dateType = item.type;
        }
      });
      this.formData.statisticalDate = dayjs(`${new Date()}`).format(
        this.format
      );
    },
  },
};
</script>