elementui范围

ElementUI 范围选择器

ElementUI 提供了多种范围选择组件，适用于日期、时间、数字等场景。以下是常见的范围选择器及其用法：

日期范围选择器

ElementUI 的 el-date-picker 支持日期范围选择，通过设置 type 为 daterange 或 datetimerange 实现。

<el-date-picker
  v-model="dateRange"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>

时间范围选择器

el-time-picker 支持时间范围选择，设置 is-range 属性为 true。

<el-time-picker
  v-model="timeRange"
  is-range
  range-separator="至"
  start-placeholder="开始时间"
  end-placeholder="结束时间">
</el-time-picker>

数字范围输入

通过 el-input-number 组合实现数字范围输入。

<el-input-number v-model="minValue" :min="0" :max="100"></el-input-number>
<el-input-number v-model="maxValue" :min="0" :max="100"></el-input-number>

滑块范围选择

el-slider 支持范围选择，设置 range 为 true。

<el-slider
  v-model="sliderRange"
  range
  :min="0"
  :max="100">
</el-slider>

自定义范围选择器

若需更复杂的范围选择，可通过组合多个组件或自定义组件实现。例如，结合 el-select 和 el-input 实现动态范围选择。

<el-select v-model="rangeType" placeholder="选择范围类型">
  <el-option label="日期" value="date"></el-option>
  <el-option label="数字" value="number"></el-option>
</el-select>
<el-date-picker v-if="rangeType === 'date'" v-model="dateRange" type="daterange"></el-date-picker>
<el-input-number v-else v-model="numberRange" :min="0" :max="100"></el-input-number>

注意事项

• 范围选择器的值通常为数组形式，例如 [startValue, endValue]。
• 可通过 picker-options 自定义禁用日期或时间。
• 确保范围逻辑合理（如开始值不大于结束值）。