SuperSASS_ 2022-07-27 18:20 采纳率: 66.7%
浏览 184
已结题

如何实现 element时间选择器的联动

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中我就不会了(刚学没多久),我感觉把赋值弄成功,联动的问题就能解决,求指点

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-07-27 19:01
    关注

    那这个 主要 也是 赋值操作 。 你需要在 data里 定义三个值 。然后 绑定change事件 。第一个change里 把第二个 和第三个的 年 赋值上 。
    第二个 里 把 第三个的 月赋值上

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 8月4日
  • 已采纳回答 7月27日
  • 创建了问题 7月27日

悬赏问题

  • ¥15 2024-五一综合模拟赛
  • ¥15 下图接收小电路,谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度
  • ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是,这到底错哪儿了😭