@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]
  })
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值