Element: disabledDate如何灵活设置禁用状态

Created on 25 Jan 2017 · 8Comments · Source: ElemeFE/element

pickerOptions0: {
disabledDate (time) {
return time.getTime() <= this.roleform.starttime
}
}
需要根据数据中设置的时间来设置禁用的时间范围，提示cannot read property 'roleform' of undefined
想请教下，针对这种情况，该如何去实现

Source

stanNo1

Most helpful comment

@tuotuogenjudi @chenjunCodingGit 我只能说我可真是个小机灵鬼。先说我的需求列表内有二列是日期选择，一个开始时间一个结束时间。需要请求数据拿到列表数据后控制开始时间和结束时间的disabledDate。应该和你们动态设置的需求差不多。不废话直接看图吧。

原理就是一开始就维护一个时间对象里面存了当前行的开始时间和结束时间（接口拿到数据的时候这个对象就要初始化一次，涉及到接口信息我就不截图了），然后focus的时候动态设置当前展开的id。disabledDate根据focusid去时间对象内对应去判断。

belief-cyf on 26 Nov 2018

👍2

All 8 comments

这里的this不是你要的组件实例😂

jikkai on 25 Jan 2017

用箭头函数或者用变量保存当前上下文

QingWei-Li on 4 Feb 2017

@QingWei-Li @jikkai 如果数据是在数组里面的话，disabledDate 怎么获取到当前的 index 呢？

<template>
  <div v-for="item in lists">
    <el-date-picker
      v-model="item.date"
      type="date"
      :picker-options="item.options">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: [{
        date: '',
        beforeDate: '2017-03-03',
        options: {
          disabledDate: {
            disabledDate: (time) => {
              const index = 0; // index 如何获取？
              return time.getTime() > new Date(this.lists[index].beforeDate).getTime() - 8.64e7;
            },
          },
        },
      }],
    };
  },
};
</script>