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

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

  • 相关阅读:
    jdk1.8 操作List<Map> 多个map 具有相同的key 进行分组合并重组数据
    js获取字符中连续的值
    Java线程ABA问题
    Oracle递归查询语句
    Oracle学习笔记表连接(十六)
    Docker For Mac没有docker0网桥
    awk 和 sed (Stream Editor)
    WARNING: firstResult/maxResults specified with collection fetch; applying in memory!
    iptables编写规则
    InnoDB Next-Key Lock
  • 原文地址:https://www.cnblogs.com/pzw23/p/14341404.html
Copyright © 2011-2022 走看看