jiangchengfeiyi-Web/src/views/test.vue

<template>
  <div class="date-picker">
    <div class="father">
    <div v-for="(item, index) in dayList" :key="index">
      <div class="inner">
        第{{ index + 1 }}天
      </div>
        <!-- 时间段部分 -->
      <div class="time-picker">
      <div v-for="(item, row) in timeList[index]" :key="row" class="box">
        <span>第 {{ row+1 }} 个时间段</span>
        <el-time-select 
          v-model="timeList[index][row].startTime" 
          style="width: 150px"
          :max-time="timeList[index][row].endTime" 
          placeholder="Start time" 
          size="default" 
          start="08:30" 
          step="00:15"
          end="18:30" />
        <el-time-select 
          v-model="timeList[index][row].endTime" 
          style="width: 150px"
          :min-time="timeList[index][row].startTime" 
          placeholder="End time" 
          size="default" 
          start="08:30" 
          step="00:15"
          end="18:30" />
        <el-button circle @click="addList(index, row)"><el-icon><Plus /></el-icon></el-button>
      <el-button circle @click="subList(index, row)" v-if="row + 1 > 1"><el-icon><Minus /></el-icon></el-button>
      </div>
    </div>
    </div>
    </div>
 
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue';
const dayList = ref([0,1,2,3])  //今天和未来三天
const timeList = ref([
  [
    {
      startTime: '',
      endTime: ''
    }
  ],
  [
    {
      startTime: '',
      endTime: ''
    }
  ],
  [
    {
      startTime: '',
      endTime: ''
    }
  ],
  [
    {
      startTime: '',
      endTime: ''
    }
  ]
])
const numberRange = ref([]) 
const addList = (index: any, row: any) => {
if ( timeList.value[index].length < 6) {
  timeList.value[index].push({
    startTime:'',
    endTime:''
  })
}
}
const subList = (index: number, row: number) => {
  console.log(index,row);
  timeList.value[index].splice(row, 1)
}
</script>

<style lang="scss" scoped>

</style>