ElementUI年份范圍選擇器功能實現(xiàn)

更新時間：2023年02月10日 11:30:06 作者：Iswayzw

elementUI中有日期范圍組件,月份范圍選擇的,就是沒有年份范圍選擇的,需要加一個類似風格的,下面這篇文章主要給大家介紹了關于ElementUI年份范圍選擇器功能實現(xiàn)的相關資料,需要的朋友可以參考下

ElementUI 年份范圍選擇器

Element的日期選擇器組件沒有提供選擇年份范圍的功能。由于項目需要，決定用兩個年份選擇器封裝一個，貼下代碼供大家參考。

代碼實現(xiàn)了年份范圍選擇組件的基本功能，以及父子組件間的雙向通信。

實現(xiàn)效果

依賴

Vue2
ElementUI

組件代碼

<template>
  <div class="year-range-picker">
    <el-date-picker
      v-model="startYear"
      type="year"
      placeholder="選擇開始年"
      size="mini"
      class="year-picker"
      @change="changeStartYear"
      format="yyyy 年"
      value-format="yyyy"
    >
    </el-date-picker>
    <span class="range-word"> 至 </span>
    <el-date-picker
      v-model="endYear"
      type="year"
      placeholder="選擇結束年"
      size="mini"
      class="year-picker"
      @change="changeEndYear"
      format="yyyy 年"
      value-format="yyyy"
    >
    </el-date-picker>
  </div>
</template>


<script>
export default {
  name: "YearRangePicker",
  // 接收父組件傳入的數據
  props: {
    yearRange: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      startYear: "",
      endYear: "",
    };
  },
  mounted() {
    // 初始化自身變量
    this.startYear = String(this.yearRange[0]);
    this.endYear = String(this.yearRange[1]);
  },
  methods: {
    changeStartYear(val) {
      // 開始年份大于結束年份，調換
      if (Number(this.startYear) > Number(this.endYear)) {
        this.startYear = this.endYear;
        this.endYear = val;
      }
      // 將改動傳回父組件
      this.$emit("yearChanged", [Number(this.startYear), Number(this.endYear)]);
    },
    changeEndYear(val) {
      if (Number(this.startYear) > Number(this.endYear)) {
        this.endYear = this.startYear;
        this.startYear = val;
      }
      this.$emit("yearChanged", [Number(this.startYear), Number(this.endYear)])
    },
  },
};
</script>


<style scoped>
.year-range-picker {
  color: black;
  text-align: center;
  font-size: 18px;
}

.range-word {
  margin-left: 10px;
  margin-right: 10px;
}

.year-range-picker .year-picker {
  max-width: 160px;
}
</style>

調用組件代碼

<template>
  <div class="test-body">
    <!-- :yearRange 為父組件向子組件傳參 -->
    <!-- :key 保證父組件的數據更新后，重新渲染子組件，使子組件也同步更新 -->
    <!-- @yearChanged 監(jiān)聽子組件向父組件傳參 -->
    <year-range
      :yearRange="yearRange"
      :key="`${yearRange[0]}_${yearRange[1]}`"
      @yearChanged="handleYearChanged"
    >
    </year-range>
  </div>
</template>

<script>
// 引入組件
import YearRangePicker from "@/components/YearRangePicker/index.vue";

export default {
  name: "Test",
  data() {
    return {
      yearRange: [2021, 2022],
    };
  },
  components: {
    // 自定義組件標簽名稱
    "year-range": YearRangePicker,
  },
  methods: {
    handleYearChanged(val) {
      this.yearRange = val;
    },
  },
};
</script>


<style scoped>
.test-body {
  width: 100%;
  height: 400px;
  padding-top: 100px;
}
</style>