需求：

頁面上有三個(gè) 日期選則器。第一個(gè)只能選擇月份，第二個(gè)是 年月， 第三個(gè)是年月日 。

然后第一個(gè)選擇完畢 第二個(gè)、第三個(gè)自動帶出年 。第二個(gè)選擇月 第三個(gè)自動帶出月。

效果圖：

實(shí)現(xiàn)過程：?

?思路： 就是 一個(gè)簡單的賦值 。第一個(gè) change里 給第二個(gè)和第三個(gè)賦值 。第二個(gè)change里給第三個(gè)賦值。

代碼：

<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聯(lián)動效果 -在線示例

補(bǔ)充：

有人會發(fā)現(xiàn) 我 賦值時(shí) 給拼了 "-01" 原因是不拼會報(bào)錯 。

TypeError: e.getFullYear is not a function。

這是因?yàn)?不符合?format 定義的類型 。 因?yàn)?第二個(gè)的??format是yyyy-MM? 在第一個(gè) 里賦值是 只有 yyyy（第一個(gè)的結(jié)果是 2022） 沒有 MM所以 需要 拼接一個(gè) 默認(rèn)的 -01(01是MM) 。第二個(gè) 得到的結(jié)果應(yīng)該是 2022-xx . 第三個(gè)同理需要 ?MM-dd .

其實(shí)這個(gè)還可以拓展 。當(dāng)?shù)诙€(gè)動的時(shí)候第一個(gè)和第三個(gè)也跟著變 。第三個(gè)變的時(shí)候第一個(gè)和第二個(gè)也跟著變 。只需要在 change2,3里對 對應(yīng)的value賦值即可 。

這個(gè)就是簡單的select聯(lián)動，效果。聯(lián)動其實(shí)就是借用 change事件 修改 和它關(guān)聯(lián)的 select。

比如：省市、區(qū)縣、村鎮(zhèn)聯(lián)動。就是 先選了省市，然后在 省市的change里 設(shè)置區(qū)縣的值，在區(qū)縣的change里設(shè)置村鎮(zhèn)的值。實(shí)際引用中 有的還需要 根據(jù) 前一個(gè) 獲取后一個(gè)的值（接口獲取），這種很常見。文章來源地址http://www.zghlxwxcb.cn/news/detail-588578.html

到了這里，關(guān)于vue element ui el-date-picker(日期選擇器)實(shí)現(xiàn)聯(lián)動聯(lián)級選擇效果。的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！