element-plus el-time-picker 时间段选择(可多选)

实现一个如图的时间段选择器

  1. 处理好时间回显逻辑,组件内['',''],后端数据[{startTime:'',endTime:''}]
  2. 处理好加和减的显示逻辑
js 复制代码
<template>
  <div>
    <div v-for="(item, index) in currentChoose" :key="index" class="flex justify-center items-center" :class="index ? 'mt-2': ''">
      <el-time-picker
        v-model="currentChoose[index]"
        v-bind="_options"
        :disabled="_options.disabled"
        @change="handleChange(item, index)"
      />
      <div class="flex ml-2 w-2" v-if="!_options.disabled">
        <el-icon @click="plusTime(item, index)"><Plus /></el-icon>
        <el-icon class="ml-2" v-if="index" @click="minusTime(item, index)"><Minus /></el-icon>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "multipletimepicker",
};
</script>

<script setup>
import { ref, computed, watch } from "vue";
import _ from "lodash";

const emits = defineEmits([
  "update:modelValue"
]);

const props = defineProps({
  disabled: {
    //禁用
    type: Boolean,
    default: false,
  },
  options: {
    type: Object,
    default: () => {},
  },
  modelValue: {
    type: [Array, Object],
    default: () => ([]),
  },
});

// 设置option默认值,如果传入自定义的配置则合并option配置项
const _options = computed(() => {
  const option = {
    'value-format': 'HH:mm',
    'format':"HH:mm",
    'is-range': true
  };
  option.disabled = props.disabled;
  return Object.assign(option, props.options);
});

const currentChoose = ref([]);

const created = () => {
  if (!props.modelValue) {
    return []
  }
  if (props.modelValue instanceof Array) {
    if (props.modelValue.length) {
      currentChoose.value = props.modelValue.map(item => {
        return [item.startTime, item.endTime]
      })
    } else {
      currentChoose.value = [['', '']]
    }
  } else {
    console.log('时间选择插件,非数组格式')
  }
}

const handleChange = () => {
  handleDataEmits()  
}

const minusTime = (item, index) => {
  if (index === 0) {
    return;
  }
  currentChoose.value.splice(index, 1);
  handleDataEmits()
}

const plusTime = (item, index) => {
  currentChoose.value.splice(index + 1, 0, [])
  handleDataEmits()
}

// 统一处理数据回显
const handleDataEmits = () => {
  if (currentChoose.value && currentChoose.value.length) {
    // 将数组处理成后端数据格式,并触发父组件的model更新
    const arrFilter = currentChoose.value.filter(item => item)
    if (!arrFilter.length) {
      emits('update:modelValue', [{startTime: "", endTime: ""}])
      return
    }
    const arr = arrFilter.map(i => {
      return {
        startTime: i[0],
        endTime: i[1]
      }
    })
    emits('update:modelValue', arr)
    return arr
  }
  emits('update:modelValue', [{startTime: "", endTime: ""}])
}

// 数据第一次进入,返显数据
watch(()=>props.modelValue, (val) => {
  created();
}, { immediate: true })
</script>
相关推荐
一个处女座的程序猿O(∩_∩)O7 分钟前
完成第一个 Vue3.2 项目后,这是我的技术总结
前端·vue.js
mubeibeinv7 分钟前
项目搭建+图片(添加+图片)
java·服务器·前端
逆旅行天涯14 分钟前
【Threejs】从零开始(六)--GUI调试开发3D效果
前端·javascript·3d
m0_7482552635 分钟前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.2 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps