根据参数不同控制el-date-picker的时间范围

最新推荐文章于 2025-03-28 10:54:55 发布

一位大腿

最新推荐文章于 2025-03-28 10:54:55 发布

阅读量412

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/anyudong1016/article/details/112180790

版权

笔记专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何根据参数不同来动态设置el-date-picker的时间范围。通过使用v-if指令实现组件的重新加载，确保每次进入页面都能更新时间选择。在需要多次进入并刷新时间范围的场景，如修改列表记录时，此方法尤为适用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-date-picker
   v-if="enterLoad"
   v-model="enterTime"
   type="date"
   value-format="yyyy-MM-dd"
   :picker-options="pickerOptions"
   placeholder="请选择进场时间">
</el-date-picker>

v-if是为了重新加载组件，若只需要加载一次，则不用定义v-if；若多次进入弹窗页面每次都要重新加载否则第二次不会刷新时间范围
（例如：修改列表每条记录）。

data() {
  return {
    pickerOptions:{},
    enterLoad:true,
  };
},
methods: {
  /** 修改按钮操作 */
  handleUpdate(row) {
    this.enterLoad = false;//重置选择器
    getPeople(row.id).then(response => {
      this.form = response.data;
      //根据id查询到的状态参数不同，将数据传入方法设置时间范围
      this.enterReload(response.data.workStatus);
    });
  },
  **//设置时间范围**
  enterReload(state){
    this.pickerOptions.disabledDate =  function(time){
      return state == 2 ? time.getTime() > new Date().getTime() : '';
    };
    this.enterLoad = true;//重置选择器
  },
}

将数据传入方法设置时间范围