日期选择器多选换行

html 复制代码

<el-form-item label="日期选择">
	<div class="multi-date-picker">
		<div class="date-item">
			<span class="dateIcon">
				<el-icon><Calendar /></el-icon>
			</span>
			<span class="dateItem">{{ selectedList.toString() }}</span>
		</div>
		<!--把日期选择器隐藏起来 -->
		<el-date-picker class="datePicker" v-model="formData.abroadHolidayInfo" value-format="YYYYMMDD" type="dates" @change="addDate" @blur="handleDatePickerFocus" placeholder="请选择日期"></el-date-picker>
	</div>
</el-form-item>

typescript 复制代码

setup(props:any) {
	const state = reactive<any>({
		selectedList: ['请选择'], // 用来展示
	})
	function handleDatePickerFocus() {
		nextTick(() => {
			const divInner = document.querySelector('.date-item') as HTMLHtmlElement;
			const inputInner = document.querySelector('.datePicker .el-input__inner') as HTMLHtmlElement;
			if (inputInner) {
				inputInner.style.width = '220px';
				setTimeout(() => {
					// 让日期选择器是高度跟div保持一致
					inputInner.style.height = `${divInner.offsetHeight}px`;
				}, 100);
			}
		});
	}
	function addDate() {
		const dateItemHTML = document.querySelector('.dateItem') as HTMLHtmlElement;
		if (state.formData.abroadHolidayInfo) {
			dateItemHTML.style.color = '#606266';
			dateItemHTML.style.fontSize = '12px';
			// 处理一下格式
			state.selectedList = state.formData.abroadHolidayInfo.map((date: any) => {
				return date.substring(0, 4) + '-' + date.substring(4, 6) + '-' + date.substring(6);
			});
		} else {
			dateItemHTML.style.color = '#c4c7cf';
			dateItemHTML.style.fontSize = '13px';
			state.selectedList = ['请选择'];
		}
	}
	onMounted(() => {
		const dateItemHTML = document.querySelector('.dateItem') as HTMLHtmlElement;
		if (state.formData.abroadHolidayInfo) {
			dateItemHTML.style.color = '#606266';
		} else {
			dateItemHTML.style.color = '#c4c7cf';
			dateItemHTML.style.fontSize = '13px';
		}
	});
}

css 复制代码

.multi-date-picker {
	display: flex;
}
.date-item {
	display: flex;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	width: 220px;
	min-height: 32px;
	font-size: 12px;
	.dateIcon {
		display: flex;
		margin-top: 8px;
		width: 25px;
		justify-content: center;
		color: #c4c7cf;
		margin-left: 4px;
		font-weight: bolder;
	}
	.dateItem {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		color: #606266;
		padding-right: 10px;
	}
}
<!--不能写在scoped -->
.datePicker {
	position: absolute;
	left: 5px;
	opacity: 0;
}