当前位置：首页 > VUE

vue实现选择季度

2026-01-07 01:21:05VUE

Vue 实现选择季度的几种方法

使用下拉选择框（Select）

在 Vue 中可以通过 v-model 绑定一个下拉选择框来实现季度选择。数据可以预先定义为一个包含季度选项的数组。

<template>
  <select v-model="selectedQuarter">
    <option v-for="quarter in quarters" :value="quarter.value" :key="quarter.value">
      {{ quarter.label }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedQuarter: '',
      quarters: [
        { value: 'Q1', label: '第一季度 (1-3月)' },
        { value: 'Q2', label: '第二季度 (4-6月)' },
        { value: 'Q3', label: '第三季度 (7-9月)' },
        { value: 'Q4', label: '第四季度 (10-12月)' }
      ]
    }
  }
}
</script>

使用日期选择器（DatePicker）扩展

如果需要更灵活的季度选择，可以基于第三方日期选择器库（如 Element UI、Ant Design Vue）扩展季度选择功能。

<template>
  <el-date-picker
    v-model="selectedQuarter"
    type="quarter"
    placeholder="选择季度"
    format="YYYY年Q季度"
    value-format="YYYY-Q"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedQuarter: ''
    }
  }
}
</script>

自定义季度选择组件

可以创建一个自定义的季度选择组件，通过按钮或卡片形式展示季度选项。

<template>
  <div class="quarter-picker">
    <div
      v-for="quarter in quarters"
      :key="quarter.value"
      class="quarter-item"
      :class="{ active: selectedQuarter === quarter.value }"
      @click="selectQuarter(quarter.value)"
    >
      {{ quarter.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedQuarter: '',
      quarters: [
        { value: 'Q1', label: 'Q1' },
        { value: 'Q2', label: 'Q2' },
        { value: 'Q3', label: 'Q3' },
        { value: 'Q4', label: 'Q4' }
      ]
    }
  },
  methods: {
    selectQuarter(quarter) {
      this.selectedQuarter = quarter
      this.$emit('change', quarter)
    }
  }
}
</script>

<style>
.quarter-picker {
  display: flex;
  gap: 8px;
}
.quarter-item {
  padding: 8px 12px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.quarter-item.active {
  background-color: #409eff;
  color: white;
}
</style>

结合年份选择

如果需要同时选择年份和季度，可以组合年份选择器和季度选择器。

vue实现选择季度

<template>
  <div>
    <select v-model="selectedYear">
      <option v-for="year in years" :value="year" :key="year">
        {{ year }}年
      </option>
    </select>
    <select v-model="selectedQuarter">
      <option v-for="quarter in quarters" :value="quarter.value" :key="quarter.value">
        {{ quarter.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    const currentYear = new Date().getFullYear()
    return {
      selectedYear: currentYear,
      selectedQuarter: 'Q1',
      years: Array.from({ length: 10 }, (_, i) => currentYear - 5 + i),
      quarters: [
        { value: 'Q1', label: '第一季度' },
        { value: 'Q2', label: '第二季度' },
        { value: 'Q3', label: '第三季度' },
        { value: 'Q4', label: '第四季度' }
      ]
    }
  }
}
</script>

以上方法可以根据实际需求选择或组合使用，实现 Vue 中的季度选择功能。