我们在数据库设计表时候将开始时间和结束时间分开记录,但是前台处理时需要在多时间选择器中展示

项目场景：

我们在数据库设计表时候将开始时间和结束时间分开记录,但是前台处理时需要在多时间选择器中展示.

---

解决方案：

代码显示

// 组件使用
			<a-form-item
                label="报名时间"
                v-bind="validateInfos.enrollTime"
                v-if="modelRef.isEnroll === 'Y'"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"
              >
                <a-range-picker
                  v-model:value="enrollTime"  //value值用数组接受
                  show-time
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  :style="{ width: '100%' }"
                  @change="enrollTimeChange"  //选择时候绑定点击时间切换值
                ></a-range-picker>
              </a-form-item>

//定义数组对象
const enrollTime = ref<string[]>();

//获取详情信息的时候(修改/查询详情)

    if (props.model) {
      loading.value = true;
      const raw = toRaw(props.model);
      modelRef.rowId = raw.rowId;
      getAct(modelRef.rowId)
        .then(res => {
          enrollTime.value = [res.enrollStartTime, res.enrollEndTime];  //数组赋值
          activityTime.value = [res.activityStartTime, res.activityEndTime];
          Object.assign(modelRef, res);
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
          emit('ok', null);
        });
    } else if (props.model === null) {
      Object.assign(modelRef, { ...ActItemDefault });
    }

//点击时间 对象赋值

const enrollTimeChange = v => {
      modelRef.enrollStartTime = v[0];
      modelRef.enrollEndTime = v[1];
    };