啥也不说直接上代码

有一个小需求 简简单单 tip: 鬼知道我用了一个上午的工作的时间

image.png

image.png

当上一次选择完成之后 要将上次选中的 放入禁用列表中 以此类推

当有选择器取消某一时间 下面的选择器可以继续选择

<div v-for="(item,index) in dateList" style="margin-bottom: 20px">
      <el-date-picker
        type="dates"
        size="small"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :value="item.time"
        :picker-options="pickerOptions(item.disabledList)"
        placeholder="选择一个或多个日期"
        @input="addDisable($event, index)"
      />
    </div>

  data() {
    return {
      disabledDateList: [],
      dateList: [ { time: [], disabledList: [] } ]
    }
  },
  methods: {
    pickerOptions(event) {
      return {
        disabledDate: (time) => {
          return time.getTime() < (Date.now() - 3600 * 1000 * 24) || event.includes(this.$tool.parseTime(time, '{y}-{m}-{d}'))
        }
      }
    },
    addTime() {
      this.dateList.push({ time: [], disabledList: this.disabledDateList })
    },
    addDisable(event, index) {
      this.dateList[index]['time'] = event
      const sortList = []
      this.dateList.map(i => i.time).map(j => sortList.push(...j))
      this.disabledDateList = Array.from(new Set([ ...this.disabledDateList, ...sortList ])).filter(item => {
        return sortList.includes(item)
      })
      this.dateList = this.dateList.map(item => {
        return {
          ...item,
          disabledList: this.disabledDateList.filter(items => {
            return !item.time.includes(items)
          })
        }
      })
    },
    getAllTime() {
      console.log(JSON.stringify(this.dateList))
    }
  }

export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    if (key === 'a') {
      return [ '日', '一', '二', '三', '四', '五', '六' ][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}