ElementUI年份范围选择器功能实现

目录

• ElementUI 年份范围选择器
• 实现效果
• 依赖
• 组件代码
• 调用组件代码
• 总结

ElementUI 年份范围选择器

Element的日期选择器组件没有提供选择年份范围的功能。由于项目需要，决定用两个年份选择器封装一个，贴下代码供大家参考。

代码实现了年份范围选择组件的基本功能，以及父子组件间的双向通信。

实现效果

依赖

• 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 监听子组件向父组件传参 -->
    <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>

总结

本文实现的年份范围选择组件具有基本的年份范围选择功能。

• 借助Vue的组件特性，能够灵活应用到页面任何位置。
• 基于组件通信，能够优雅的管理数据。

但是也存在不足，用户调整一次年份范围，需要分别点击起始年份和结束年份，无法做到像官方的日期范围选择组件那样，点击一次，直接进行区间调整。