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>

data() {
  return {
    dateRange: []
  }
}

时间范围选择

通过 el-time-picker 组件设置 is-range 属性可以实现时间范围选择。

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

data() {
  return {
    timeRange: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
  }
}

数值范围选择

使用 el-slider 组件设置 range 属性可以实现数值范围选择。

<el-slider
  v-model="valueRange"
  range
  :max="100">
</el-slider>

data() {
  return {
    valueRange: [20, 50]
  }
}

自定义范围验证

可以为范围选择组件添加自定义验证规则，确保用户输入符合要求。

rules: {
  dateRange: [
    { 
      type: 'array',
      required: true,
      fields: {
        0: { type: 'date', required: true },
        1: { type: 'date', required: true }
      }
    }
  ]
}

范围选择事件

各范围选择组件都提供了事件监听功能，如 change 事件可以在值改变时触发相应操作。

<el-date-picker
  v-model="dateRange"
  type="daterange"
  @change="handleDateChange">
</el-date-picker>

methods: {
  handleDateChange(val) {
    console.log('选择的日期范围:', val)
  }
}