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

如何实现 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日

悬赏问题

  • ¥50 cocos2d-x lua 在mac上接入lua protobuf?
  • ¥15 es 7.17.20版本生成时间戳
  • ¥15 wpf dategrid表头排序图标自定义
  • ¥15 xshell无法连接提示ssh服务器拒绝密码
  • ¥15 AT89C52单片机C语言关于串口通信的位操作
  • ¥20 需要步骤截图(标签-服务器|关键词-map)
  • ¥50 gki vendor hook
  • ¥15 灰狼算法和蚁群算法如何结合
  • ¥15 写一个利用ESP32自带按键和LED控制的录像代码
  • ¥20 stm32f103,hal库 hal_usart_receive函数接收不到数据。