Vue+element 如何实现 element时间选择器的联动
<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>
<script>
export default {
name:"riqi",
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
value1: '',
value2: '',
value3: '',
};
},
methods:{
timeChange1(value1){
this.year = value1
console.log("我是year")
this.getEchartData1()
debugger
},
timeChange2(value2){
this.month = value2
console.log("我是month")
this.getEchartData2()
},
getEchartData1(){
const nian = this.year
console.log(nian)
// console.log(nian)
// console.log(yue)
// console.log(this.ri)
},
getEchartData2(){
const yue = this.month
console.log(month)
console.log(' 我是data2')
// console.log(nian)
// console.log(yue)
// console.log(this.ri)
}
},
};
</script>
Vue+element 如何实现 element时间选择器的联动:
就是有三个时间选择器,
第一个是只能选择年份的type为year的时间选择器
第二个是能选择年份和月份的type为month的时间选择器
第三个是年月日都能选择的type为date的时间选择器。
要实现的功能是 当第一个选择器选完年份后,后面两个选择器的年份就自动变成第一个选完的年份。第二个选择器选完月份后,第三个选择器的月份就变成第二个的月份了。
我的思路是先用@change获取选择器获取第一个选择器获得的年份 和 第二个选择器获得的月份,然后把第一个选择器的年份赋值给后面两个选择器,第二个选择器的月份传值给最后一个选择器,但是我卡在赋值上面了,之前学C++的时候定义完两个变量如a,b后可以直接用b = a来进行赋值,在VUE中我就不会了(刚学没多久),我感觉把赋值弄成功,联动的问题就能解决,求指点