element-plus el-time-picker 时分数据回显

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="时间范围">
        <template #default="scope">
          <el-time-picker
            v-model="scope.row.times"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="HH:mm"
            @change="changeTimeRange(scope.row, scope.$index)"
            :default-value="defaultTime2"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { parseTime } from './utils'; // 假设你有一个工具函数来解析时间

const tableData = ref([
  { name: '政策1', times: ['09:00', '12:00'] },
  { name: '政策2', times: ['10:00', '13:00'] }
]);

// 设置默认选中的时间范围
const defaultTime2 = ref([
  new Date('2023-01-01T09:00:00'),
  new Date('2023-01-01T12:00:00')
]);

// 监听 tableData 的变化，确保 times 是 Date 对象
watch(tableData, (newVal) => {
  newVal.forEach((item) => {
    if (Array.isArray(item.times) && item.times.length === 2) {
      item.times = item.times.map(timeStr => parseTime(timeStr));
    }
  });
}, { immediate: true });

const changeTimeRange = (item, index) => {
  console.log('Time range changed for item:', item, 'at index:', index);
  // 你可以在这里执行其他操作，例如发送到后端
};

// 工具函数：将时间字符串转换为 Date 对象
function parseTime(timeStr) {
  const [hours, minutes] = timeStr.split(':').map(Number);
  return new Date(2023, 0, 1, hours, minutes);
}
</script>