zoukankan      html  css  js  c++  java
  • el-date-picker设置可选范围picker-options需要注意的事项,要不然可能会报undefined的错误

    1、首先来看看官网的例子

    <template>
      <div class="block">
        <el-date-picker
          v-model="value1"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
            },
            value1: '',
          };
        }
      };
    </script>

    2、如果是引用其他数据来做限制的话,就需要稍微改变一下

    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              disabledDate:(time)=> {
                return time.getTime() < this.startTime.getTime()||time.getTime()>this.endTime.getTime();
              },
            },
            value1: '',
            startTime:new Date(),
            endTime:new Date(),
          };
        }
      };
    </script>        

    3、错误重现

    (1)

    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() < this.startTime.getTime()||time.getTime()>this.endTime.getTime();
              },
            },
            value1: '',
            startTime:new Date(),
            endTime:new Date(),
          };
        }
      };
    </script>    

    上图错误

    [Vue warn]: Error in render: "TypeError: Cannot read property 'startTime' of undefined"

    (2)

    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() < startTime.getTime()||time.getTime()>endTime.getTime();
              },
            },
            value1: '',
            startTime:new Date(),
            endTime:new Date(),
          };
        }
      };
    </script> 

    上图错误[Vue warn]: Error in render: "ReferenceError: startTime is not defined"

    4、所以

    (1)

    pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
            },

    这种形式适合不引用其他定义的数据。

    (2)

     pickerOptions: {
              disabledDate:(time)=> {
                return time.getTime() < this.startTime.getTime()||time.getTime()>this.endTime.getTime();
              },
            },

    需要引用定义的数据的话用这种形式。

  • 相关阅读:
    GO-GRPC实践(二) 增加拦截器,实现自定义context(带request_id)、recover以及请求日志打印
    第六章-堆
    第五章-本地方法接口和本地方法栈
    第四章-虚拟机栈
    第三章-运行时数据区及程序计数器
    04-再谈类的加载器
    03-类的加载过程(类的生命周期)详解
    1.编程入门
    SpringBoot 整合 SpringSecurity 梳理
    pip版本过低无法升级问题
  • 原文地址:https://www.cnblogs.com/pzw23/p/14341404.html
Copyright © 2011-2022 走看看