element+vue 年月日三级联动

1 年月日三级联动时一般是以当前时间开始.所以第一步获取当前年月日。
2 根据年月计算出日期。
3 在年份改变时计算出当月的日期。
4 在月份改变时根据年份和月份计算日期。

                <!-- 年 -->
                <el-select class="col-md-2" v-model="year" @change="changeYear">
                  <el-option
                    v-for="item in yearlist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

                <!-- 月 -->
                <el-select class="col-md-2" v-model="month" @change="changeMonth">
                  <el-option
                    v-for="item in monthlist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

                <!-- 日 -->
                <el-select class="col-md-2" v-model="day" @change="changeDay">
                  <el-option
                    v-for="item in daylist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

 data() {
        return {            
            year:'',
            month:'',
            day:'',
            yearlist:[],
            monthlist:[],
            daylist:[],
        };
    },

 mounted() {
        this.initYearList()
    },

       //获取当前时间的年月日
        initYearList(){
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
           this.getYearData(year)
        },
        //获取年份---年份是在当前年份向前2年向后1年
        getYearData(data){
            let arr = new Array();
            for(let i = data - 2;i < data + 1; i ++){
                arr.push({
                    value:i,
                    label:i+"年"
                })
            }
            this.yearlist = arr;
        },
        //获取月份
        changeYear(){
            let arr = [];
            for(let i = 1;i < 13; i ++){
                arr.push({
                    value:i,
                    label:i+"月"
                })
            }
            this.monthlist = arr;
            console.log(this.year)
        },
        //月份变化时
        changeMonth(){
            this.getDayData(this.year,this.month);
            console.log(this.month)
        },
        changeDay(){
            console.log(this.day)
        },
        //计算日期
        getDayData(year,month){
            let day;
            if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
                day = 31
            } else if (month == 4 || month == 6 || month == 11 || month == 9) {
                day = 30
            } else if (month == 2) {
                if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) { //闰年
                    day = 29
                } else {
                    day = 28
                }
            }
            let arr =[];
            for(let i = 1;i < day + 1; i ++){
                arr.push({
                    value:i,
                    label:i+"日"
                })
            }
            this.daylist = arr;
        },