<el-time-picker :is-range="true" v-model="row.timePicker" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm:ss" :picker-options="pickerOptions" @change="validateDateOverlay" placeholder="选择时间范围"> </el-time-picker> pickerOptions: { selectableRange: '18:30:00 - 20:30:00' },设置的selectableRange不生效

根据您提供的代码，我注意到您的 `pickerOptions` 对象中的 `selectableRange` 值的格式不正确。在 `selectableRange` 中，您应该使用时间范围的数组，每个时间范围应该是一个字符串，格式为 `HH:mm:ss - HH:mm:ss`。

因此，您应该将 `pickerOptions` 对象中的 `selectableRange` 更改为以下格式：

pickerOptions: {
  selectableRange: ['18:30:00 - 20:30:00']
}

请注意，`selectableRange` 的值应该是一个包含时间范围字符串的数组，即使您只想选择一个时间范围。

如果您按照上述方式更新了代码， `selectableRange` 应该能够正常工作。

相关问题

请优化代码：if (this.currentAction == 'Add') { this.editFormFields.TIMEPEROID = row.TIMEPEROID this.editFormOptions.forEach(x => { x.forEach(option => { console.log(option) if (option.field == 'TIMEPEROID') { option.render = () => { return ( <div> <el-time-picker ref="timePicker" v-model={this.editFormFields.TIMEPEROID} is-range format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" > </el-time-picker> </div> ) } } }) }) } if (this.currentAction == 'update') { this.editFormFields._TIMEPEROID = "" this.editFormOptions.forEach(x => { x.forEach(option => { if (option.field == 'TIMEPEROID') { option.render = () => { return ( <div> <el-time-picker ref="timePicker" v-model={this.editFormFields._TIMEPEROID} is-range format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" > </el-time-picker> </div> ) } } }) }) }

你可以将代码进行优化，将重复的部分提取出来，这样可以减少代码量和提高代码可读性，示例如下：

const timePickerRender = (field, value) => {
  return (
    <div>
      <el-time-picker
        ref="timePicker"
        v-model={value}
        is-range
        format="HH:mm"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      />
    </div>
  );
};

if (this.currentAction === 'Add') {
  this.editFormFields.TIMEPEROID = row.TIMEPEROID;
  this.editFormOptions.forEach((x) => {
    x.forEach((option) => {
      if (option.field === 'TIMEPEROID') {
        option.render = () => timePickerRender(option.field, this.editFormFields.TIMEPEROID);
      }
    });
  });
}

if (this.currentAction === 'update') {
  this.editFormFields._TIMEPEROID = '';
  this.editFormOptions.forEach((x) => {
    x.forEach((option) => {
      if (option.field === 'TIMEPEROID') {
        option.render = () =>
          timePickerRender(option.field, this.editFormFields._TIMEPEROID);
      }
    });
  });
}

在上面的代码中，我们将 `if` 语句中重复的部分提取出来，创建了一个 `timePickerRender` 函数来生成时间选择器的渲染结果。然后，我们只需要调用这个函数即可生成时间选择器的渲染结果，这样可以减少代码量和提高代码可读性。

后端使用 private List<Date> exeTime;前端 <el-form-item label="执行时间" prop="exeTime"> <el-date-picker clearable v-model="queryParams.exeTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择创建时间"> </el-date-picker> </el-form-item>查询不来数据数组返回为空

前端传递的参数是一个 Date 类型的数组，而后端接收的参数是一个 List<Date> 类型的，需要在前端传递参数时将数组转换为 List。可以在前端代码中使用 JavaScript 的 Array.prototype.map() 方法将 Date 类型的数组转换为字符串类型的数组，然后再传递给后端。修改后的代码如下：

<el-form-item label="执行时间" prop="exeTime">
  <el-date-picker clearable
                  v-model="queryParams.exeTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="请选择创建时间">
  </el-date-picker>
</el-form-item>

<script>
  export default {
    data() {
      return {
        queryParams: {
          exeTime: []
        }
      };
    },
    methods: {
      search() {
        // 使用 Array.prototype.map() 方法将 Date 类型的数组转换为字符串类型的数组
        let exeTime = this.queryParams.exeTime.map(item => {
          return item.toLocaleString();
        });

        // 将转换后的参数传递给后端
        let params = {
          exeTime: exeTime
        };

        // 发送请求
        axios.get('/api/data', { params: params })
          .then(res => {
            console.log(res.data);
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
</script>

这样就可以将前端传递的参数转换为后端需要的 List 类型了。