vue 年月日三级联动

年月日三级联动

<template>
  <!-- 时间的三级联动 -->
  <div id="myDate">
    <el-select v-model="yearsModel" @change="dateChange(1)" placeholder="请选择">
      <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <span>年</span>
    <el-select v-model="monthsModel" @change="dateChange(2)" placeholder="请选择">
      <el-option
        class="dateSet1"
        v-for="item in months"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <span>月</span>
    <el-select v-model="daysModel" @change="dateChange(3)" placeholder="请选择">
      <el-option
        class="dateSet2"
        v-for="item in days"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <span>日</span>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      yearsModel: null,
      years: [],
      monthsModel: null,
      months: [],
      daysModel: null,
      days: []
    }
  },
  created() {
   
    this.init()
  },
  methods: {
   
    init() {
   
      var myDate = new Date()
      var year = myDate.getFullYear() //获取当前年
      var month = myDate.getMonth()