vue 使用 el-date-picker 动态设置 disabled-date

需要根据 后端返回的时间 来设置 el–date–picker 可以选范围。最好的办法就是等请求回来的时候在渲染页面，可是ui给的页面设计是在请求之前就需要展示 el–date-picker 组件。

elementPlus 提供的 el–date-picker 组件 disabled–date 属性又是一个方法，没有办法直接通过监听属性值的变化而变法。只有另辟蹊径，通过 computed 计算属性嵌套方法，代码如下：

需求：

• 时间范围是：后端返回的时间 至 当天时间

• 如果后端没有返回时间的话就只限制结束时间为当天

       <el-date-picker
        v-model="staffFormData.employmentDate"
        placeholder="请选择日期"
        style="width: 100%"
        value-format="YYYY-MM-DD"
        :disabled-date="disabledDate"
        v-if="isp"
      &gt;</el-date-picker&gt;

<script setup lang="ts"&gt;
// 使用 dayjs 方便 时间的操作，写原生的话就不需要 dayjs
import dayjs from 'dayjs'

const departureDate = ref('')
// 模拟异步请求
setTimeout(() =&gt; {
    // 可以选择时间在 3月1  之后
   departureDate.value = "2023-03-01"
}, 300);

const now = dayjs().set('hour', 23).set('minute', 59).set('second', 59).subtract(1, 'day')
const isp = ref(true)
 // 当 departureDate 值发生改变的时候，计算属性会重新被调用
const disabledDate = computed(() =&gt; {
  let w
  if (departureDate.value) {
    w = dayjs(departureDate.value)
  }
  // 使用 v-if 卸载组件再重新渲染
  isp.value = false
  setTimeout(() => {
    isp.value = true
  }, 50)
 
  return (value: Date) => {
    const on1 = value.getTime() - 8.64e7 > now.valueOf()
    if (on1) return on1
    if (w) {
      const on2 = value.getTime() < w.valueOf()
      if (on2) return on2
    }
  }
})

</script>