需求：

页面上有三个 日期选则器。第一个只能选择月份，第二个是 年月， 第三个是年月日 。

然后第一个选择完毕 第二个、第三个自动带出年 。第二个选择月 第三个自动带出月。

效果图：

实现过程： 

 思路： 就是 一个简单的赋值 。第一个 change里 给第二个和第三个赋值 。第二个change里给第三个赋值。

代码：

<template>
  <div>
     <span id="year1">年</span>
        <el-date-picker
          v-model="value1"
          type="year"
          placeholder="选择年"
          @change="timeChange1"
          value-format="yyyy"
          :picker-options="pickerOptions"
        ></el-date-picker>
     
        <el-divider></el-divider>
     
          <span id="month1">月</span>
          <el-date-picker
            v-model="value2"
            type="month"
            placeholder="选择年月"
            @change="timeChange2"
            value-format="yyyy-MM"
            :picker-options="pickerOptions"
          ></el-date-picker>
     
        <el-divider></el-divider>
     
            <span id="date1">日</span>
            <el-date-picker
              v-model="value3"
              type="date"
              placeholder="选择年月日"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
    
  </div>
  </template>

 data() {
        return {
           pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
          value1:"",
          value2:"",
          value3:""
        }
      
      },
  methods:{
      timeChange1(){
              console.log(this.value1)
           this.value2=this.value1+"-01";
           this.value3=this.value1+"-01"+"01";
            },
             timeChange2(){
               this.value3=this.value2+"-01";
            },
              timeChange3(){
              
            }
  }

element-ui date-picler联动效果 -在线示例

补充：

有人会发现 我 赋值时 给拼了 "-01" 原因是不拼会报错 。

TypeError: e.getFullYear is not a function。

这是因为 不符合 format 定义的类型 。 因为 第二个的  format是yyyy-MM  在第一个 里赋值是 只有 yyyy（第一个的结果是 2022） 没有 MM所以 需要 拼接一个 默认的 -01(01是MM) 。第二个 得到的结果应该是 2022-xx . 第三个同理需要  MM-dd .

其实这个还可以拓展 。当第二个动的时候第一个和第三个也跟着变 。第三个变的时候第一个和第二个也跟着变 。只需要在 change2,3里对 对应的value赋值即可 。

这个就是简单的select联动，效果。联动其实就是借用 change事件 修改 和它关联的 select。

比如：省市、区县、村镇联动。就是 先选了省市，然后在 省市的change里 设置区县的值，在区县的change里设置村镇的值。实际引用中 有的还需要 根据 前一个 获取后一个的值（接口获取），这种很常见。