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的组件特性，能够灵活应用到页面任何位置。
• 基于组件通信，能够优雅的管理数据。

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

到此这篇关于ElementUI年份范围选择器功能实现的文章就介绍到这了,更多相关ElementUI年份范围选择器内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• ElementUI日期选择器时间选择范围限制的实现

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！