需求：
页面上有三个 日期选则器。第一个只能选择月份，第二个是 年月， 第三个是年月日 。
然后第一个选择完毕 第二个、第三个自动带出年 。第二个选择月 第三个自动带出月。
效果图：
实现过程：
思路： 就是 一个简单的赋值 。第一个 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。文章来源：https://www.toymoban.com/news/detail-588578.html
比如：省市、区县、村镇联动。就是 先选了省市，然后在 省市的change里 设置区县的值，在区县的change里设置村镇的值。实际引用中 有的还需要 根据 前一个 获取后一个的值（接口获取），这种很常见。文章来源地址https://www.toymoban.com/news/detail-588578.html
到了这里，关于vue element ui el-date-picker(日期选择器)实现联动联级选择效果。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
