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

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

  • 相关阅读:
    nginx 配置下载text等文件
    linux 挂载硬盘
    linux 常用命令
    linux 常用目录的作用
    linux 增加新用户无法使用sudo命令解决办法
    linux 安装ifconfig
    linux 更换yum源
    eclipse 环境安装
    ORACLE 迁移MYSQL 随笔
    微信跳转显示空白页
  • 原文地址:https://www.cnblogs.com/pzw23/p/14341404.html
Copyright © 2011-2022 走看看