• 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();
              },
            },

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

  • 相关阅读:
    45 个非常有用的 Oracle 查询语句
    [转载]java图片缩放处理
    [转载]java图片缩放处理
    十步完全理解SQL
    十步完全理解SQL
    day04_20170521_函数(二)
    to disable the entity lazy load, The ObjectContext instance has been disposed and can no longer be used for operations that require a connection.
    wordpress mobile templates
    linq query, using int.parse to convert varchar to int while orderby
    appfabric 简单应用
  • 原文地址:https://www.cnblogs.com/pzw23/p/14341404.html
Copyright © 2020-2023  润新知