<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]
})
}
@arco.design组件DatePicker快捷shortcuts点击异步
最新推荐文章于 2024-08-13 08:23:44 发布