el-select 中嵌套时间选择器 el-time-picker 并且实现时间多选功能

news2025/11/3 21:56:17

el-select 中嵌套时间选择器 el-time-picker 并且实现时间多选功能

需求是：时间可多选 element中时间的选择不支持多选下面进行封装拼接时间多选

<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon >
	<el-form-item prop="times" >
		<!-- 这里使用el-select嵌套div的形式 支持多选  -->
		<el-select v-model="ruleForm.times" multiple collapse-tags placeholder="请选择生效时间" clearable style="width: 100%;" ref="timeRef" @visible-change="visChange">
			<!-- el-option中嵌套dev形式 展示想显示的内容 为防止el-option选择影响使用 样式设置高度自适应 内边距为0 -->
		 	<el-option label="选项" value="1" style="min-height: 80px;height:auto;padding:0;">
		 			<!-- div设置点击stop不穿透其他点击 样式根据需求设置 -->
					<div @click.stop style="display: flex;flex-flow: column wrap;padding:10px;">
						<!-- 添加多个使用循环 -->
						<div v-for="(tis,tv) in ruleForm.times" :key="tv" style="height:30px;padding-bottom:10px;display: flex;">
							<el-time-picker v-model="ruleForm.times[tv]" @visible-change="visTimeChange" value-format="HH:mm:ss" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
							<!-- 支持删除 -->
							<el-button type="danger" style="width: 60px;margin-left:10px;" @click.stop="delTimeListFun(tv)">删除</el-button>
						</div>
						<!-- 支持新增时间 -->
						<el-button type="primary" style="width: 80px;" @click.stop="addTimeListFun">增加时间</el-button>
					</div>
			</el-option>
		</el-select>
	</el-form-item>
</el-form>
//定义数据
let ruleForm = reactive({
	times:[['00:00:00','23:59:59']],//初始值数组可多选['00:00:00','23:59:59']
})
//必填校验设置
const rules = reactive({
	times:[{ required: true, message: '请选择生效时间', trigger: 'change' },], 
})

//js代码部分
//生效时间 增加事件
function addTimeListFun(){
	ruleForm.times.push(['00:00:00','23:59:59'])
}
//生效时间 删除事件
function delTimeListFun(index:any){
	ruleForm.times.splice(index, 1)//删除制定下标的数据
}
//页面样式完成后  如果点击TimePicker选择时间 会触发 select 隐藏下拉框的方法  类似点击了空白区域
// 现在做如下设置 规避上述问题  select中添加@visible-change="visChange" 方法 和ref="timeRef"
//el-time-picker添加@visible-change="visTimeChange"

let visTimeChangeVal = ref(null)// 记录  TimePicker 的下拉列表出现/消失时触发 是否消失
let timeRef:any = ref() //下拉列表 ref
let ruleFormRef:any =ref()//表单ref
//当 select 的下拉列表出现/消失时触发
function visChange(val:any){
	// console.log(val,visTimeChangeVal.value);
	// 初始化时并且点击select下拉了 显示
	if(visTimeChangeVal.value == null && val == true){
		timeRef.value.visible = true
	}
	// 点击时间选择el-time-picker的下拉了 显示
	if(visTimeChangeVal.value == true){
		timeRef.value.visible = true
	}
	//隐藏select的下拉框时 判断是否有值 有值错误提示不显示
	if(ruleForm.times.length > 0){
		ruleFormRef.value.clearValidate('times')//清除校验错误信息
	}
}
//当 TimePicker el-time-picker 的下拉列表出现/消失时触发
function visTimeChange(val:any){
	visTimeChangeVal.value = val//记录数据
}