查询备案网站,方法网站目录,营销型网站深度网,百度整站优化本文参考#xff1a;https://pusdn-dev.feishu.cn/wiki/VF4hwBAUliTE6TkUPKrcBNcZn9f?fromfrom_copylink
由PUSDN整理发行#xff0c;收录时请保留PUSDN。 前端组件专题
年月日时间范围表单回显RangePicker
推荐使用多个字段存储#xff0c;不推荐用英文逗号拼接时间https://pusdn-dev.feishu.cn/wiki/VF4hwBAUliTE6TkUPKrcBNcZn9f?fromfrom_copylink
由PUSDN整理发行收录时请保留PUSDN。 前端组件专题
年月日时间范围表单回显RangePicker
推荐使用多个字段存储不推荐用英文逗号拼接时间便于查询等操作。
方式一英文逗号分隔string接收
表单页示例modal.vue
数据库:pgz_range实体pgzRange
import dayjs from dayjs;
// ......
if (isUpdate.value id) {const record await demoInfo(id);record.pgzCheckboxArr record.pgzCheckbox ? record.pgzCheckbox.split(,) : [];if (record.pgzRange) {const [startTime, endTime] record.pgzRange.split(,);record.pgzRange [dayjs(startTime), dayjs(endTime)];}await formApi.setValues(record);
}
// ......const data cloneDeep(await formApi.getValues());
data.pgzCheckbox data.pgzCheckboxArr.join(,);if (data.pgzRange data.pgzRange.length 2) {const [startTime, endTime] data.pgzRange;data.pgzRange ${startTime.format(YYYY-MM-DD HH:mm:ss)},${endTime.format(YYYY-MM-DD HH:mm:ss)};}await (isUpdate.value ? demoUpdate(data) : demoAdd(data));// data.ts{label: 时间范围, fieldName: pgzRange,component: RangePicker,
},
查询列表示例index.vue 方式二两个字段分别处理
例如实体类和数据库有两个字段。startTimeendTime。
modal.vue表单页示例 const [BasicForm, formApi] useVbenForm({ // .... fieldMappingTime: [ [ planDateRange,// 此字段前端虚拟实体和数据库不存在 [startTime, endTime], [YYYY-MM-DD 00:00:00, YYYY-MM-DD 23:59:59], ], ],
回显
index.vue查询列表示例
