将el-select二次封装成年份选择表单

<template>
  <el-select v-model="years" multiple :clearable="clearable" :disabled="disabled" @change="changeSelect">
    <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>
<script>
export default {
  name: 'YearSelect',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    clearable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      years: [],
      year: new Date().getUTCFullYear()
    }
  },
  computed: {
    yearsOptions () {
      const year = new Date().getUTCFullYear() + 1
      const result = []
      for (let i = 0; i <= 20; i++) {
        const temp = year - i
        result.push({
          label: temp,
          value: Number(temp)
        })
      }
      return result
    }
  },
  watch: {
    value: {
      handler (newVal, oldVal) {
        if (newVal && newVal.length) {
          if (newVal !== oldVal) {
            const arr = newVal.sort((a, b) => (a - b))
            this.years = arr
          }
        } else {
          this.years.push(this.year)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    changeSelect (val) {
      if (val && val.length) {
        this.$emit('input', val)
        this.$emit('change', val)
      } else {
        this.$emit('input', [this.year])
        this.$emit('change', [this.year])
      }
    }
  }
}
</script>
<style>
</style>

引用

<el-form-item prop="years">
  <YearSelect v-model="searchForm.years" placeholder=""></YearSelect>
</el-form-item>