antd 3.x时间范围选择器,选择时间后怎么让值合并成一个倒着的字符串传给后端?
antd组件库时间选择器,选择时间段开始时间和结束时间。选择后是一个数组,转成字符串后怎么倒着显示?这个是循环的,点击右边的小+号可以添加,就是可以添加第二次第三次这样的选择了一个时间段,控制台打印的就是["开始时间","结束时间"]这样的数据。但是后端需要的是["22,16,2,10"]这样的数据。选择完需要让值倒着给后端传过去
如果前面的日期也选择了的话,后端需要的数据格式就是["22,16,2,10","16,4"]这样的格式像是选择了01 02 03 04这样的时间给后端传参之前怎么把0去掉呢?
<div class="form-container">
<div v-for="(i, index) in yearCheck" :key="index" class="form-item-container">
<a-form-item
:label="i.label"
:name="['yearCheck.' + index + '.first']"
:rules="yearFormRules.first"
:label-col="{ span: 7 }"
>
<a-space direction="horizontal">
<a-date-picker v-model:value="i.first" value-format="MM-DD" style="width:240px;margin-right:70px" format="MM-DD" @change="handleDateChange"/>
</a-space>
</a-form-item>
<a-form-item
:name="['yearCheck.' + index + '.yearTimer']"
:rules="yearFormRules.yearTimer"
>
<a-space direction="horizontal">
<a-time-range-picker v-model:value="i.yearTimer" style="width:240px" @change="changePick" value-format="HH:mm" format="HH:mm" />
<plus-circle-outlined @click="addFormItem(index)" v-if="index === yearCheck.length - 1"/>
<minus-circle-outlined v-if="index > 0" @click="removeFormItem(index)"/>
</a-space>
</a-form-item>
</div>
</div>
changePick(timeRange) {
console.log(timeRange);
const times = timeRange.map(time => {
const [hour, minute] = time.split(':');
return `${minute},${hour}`;
});
const result = times.join(',');
console.log(result);
},
写了一个change事件去把时间选择器的数组转成字符串。但是为什么现在控制台打印的确是02,10,22,16这样的啊?这个应该怎么具体去解决呀各位大佬
添加第一次的字符串是"22,16,2,10,16,4"是这样的添加第二次也是这样的。但是最后是一个数组["22,16,2,10,16,4","第二次添加的时间和日期"]
回复
1个回答

test
2024-06-19
控制台打印的就是["开始时间","结束时间"]这样的数据
要得到正确的数据,不一定非要在控件上面去想办法。有 changePick
函数,却不是一定要作为事件来使用。完全可以拿到原始数据,再通过一个计算属性,使用 chnagePick
把它转换成你需要的样子
另外,在 changePick
的处理上,可以先按原顺序处理成数组,再 reverse()
翻转,最后重新拼接成字符串:
function changePick(timeRange) {
// console.log(timeRange);
const times = timeRange
.flatMap(time => {
// ^^^^^^^ 注意用的 flatMap,把两层数组展开成一层
const [hour, minute] = time.split(":");
return [hour, minute];
// ^^^^^^^^^^^^^^ 保持原来的顺序
});
return times.reverse().join(",");
// ^^^^^^^^^ 先反转
// ^^^^^ 再拼接
}
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容