@arco.design组件DatePicker快捷shortcuts点击异步

<a-date-picker
 v-model="form.timeRange"
  shortcuts-position="left"
  :shortcuts="rangeShortcuts"
  @selectShortcut="selectShortcutFn"
/>
// shortcuts 配置格式为 label 和 value,当不配置 value 时,则点击不会设置上值
const rangeShortcuts = [
  {
    label: '一个月',
  },
  {
    label: '三个月',
  },
  {
    label: '半年',
  },
  {
    label: '1年',
  },
  {
    label: '2年',
  },
]
// 点击快捷筛选时,调用接口进行赋值
const selectShortcutFn = (shortcut) => {
  let cacheStart = form.value.expectedUseCarTime
  let cacheEnd = form.value.expectedReturnCarTime
  // 移除副作用 start
  // 由于没有配置 value 点击之后会进行清空,此时将当前值(点击快捷选择前的值)重新赋值,使页面不会出现清空情况
  nextTick(() => {
  	// 如果当前picker为 form 一部分,需要清除必填提示
    formRef.value.clearValidate('timeRange')
    form.value.timeRange = [cacheStart, cacheEnd]
    form.value.expectedUseCarTime = cacheStart
    form.value.expectedReturnCarTime = cacheEnd
  })
  // 移除副作用 end
  quickDateItemClicked(shortcut.label).then((val) => {
    let startStr = val[0]
    let endStr = val[1]
    form.value.expectedUseCarTime = startStr
    form.value.expectedReturnCarTime = endStr
    form.value.timeRange = [startStr, endStr]
  })
}

你可能感兴趣的:(前端,javascript,linux)