element日历禁选日期动态赋值

 先上代码：

<template>
 <el-date-picker
  v-model="value"
  align="left"
  type="date"
  placeholder="选择日期"
  :picker-options="pickerOptions"
   @focus="setDisabled">
  </el-date-picker>
</template>

<script>
export default {
  data () {
    return {
      pickerOptions: {},
      value: ''
    }
  },
  methods: {
    setDisabled () {
      var t = [{201908: '0000000000000001111100000000000'}, {201909: '000000000000000111110000000000'}]
      var useDay = []
      for (var i in t) {
        var keys = Object.keys(t[i])
        for (var key in keys) {
          var month = keys[key].slice(0, 4) + '-' + (parseFloat(keys[key].slice(4, 6)) > 9 ? keys[key].slice(4, 6) : keys[key].slice(5, 6))
          var days = t[i][keys[key]]
          for (var day = 0; day < days.length; day++) {
            if (days.charAt(day) === '1') {
              useDay.push(month + '-' + (day + 1))
            }
          }
        }
      }
      this.pickerOptions = {
        disabledDate (val) {
          var time = val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate()
          if (useDay.indexOf(time) > -1) {
            return false
          } else {
            return true
          }
        }
      }
    }
  }
}
</script>

在日期选择器被focus的时候才调用函数设置禁选日期，setDisabled（）开始时拥有的数据是 t 格式，key为年月，value为当月每一天是否可选，即 0/1 组成（8月有31天，则共31个数字，0表示禁选，1表示可选），处理后得到 useDay 数组，若条件允许，可直接给 useDay 赋值，不用将 t 转换为 useDay，再给 pickerOptions 赋值，disabledDate 必须为函数，参数为用来判定是否禁选的日期，即日历上每一个日期遍历进行disabledDate 函数，返回 false则禁选此日期，反之可选

效果图如下