基于vue3和element-ui实现年份的区间筛选

效果图

组件代码
<template>
<div class="yearRange">
<el-date-picker class="picker-first" v-model="start" value-format="YYYY" @change="val => onDateChange(0, val)"
:picker-options="pickerOptionsStart" :placeholder="startPlaceholder" type="year">
</el-date-picker>
<div class="devideLine">——</div>
<el-date-picker class="picker-first" v-model="end" value-format="YYYY" @change="val => onDateChange(1, val)"
:picker-options="pickerOptionsEnd" :placeholder="startPlaceholder" type="year">
</el-date-picker>
</div>
</template>

<script>
import { ref } from "vue";
export default {
name: "YearRangePicker",
setup(props, { emit }) {

    const start = ref(''), end = ref('')
    return {
        start, end,
        pickerOptionsStart: {
            disabledDate(date) {
                console.log(date)
                return false
            },
        },
        pickerOptionsEnd: {
            disabledDate(date) {
                console.log(date)
                return false
            },
        },
        onDateChange(index, val) {
            if (!val) { //一清都清
                start.value = ''; end.value = ''
                return
            }
            switch (index) {
                case 0:
                    if (!end.value || (end.value / 1 < val / 1)) {
                        end.value = val
                    }
                    break;
                case 1:
                    if (!start.value || (start.value / 1 > val / 1)) {
                        start.value = val
                    }
            }
            emit('update:value', [start.value, end.value])
            // if(index===0){
            //  if(!end.value){

            //  }
            // }
        }
    }
},
watch: {
    value: {
        handler(newVal, oldValue) {
            if (newVal) {
                this.start = newVal[0]
                this.end = newVal[1]
            }
        },
        immediate: true
    },
},
props: {
    value: {
        type: Array,
        default: []
    },
    startPlaceholder: {
        type: String,
        default: '请选择开始时间'
    },
    endPlaceholder: {
        type: String,
        default: '请选择结束时间'
    }
},
methods: {

},

}
</script>

<style scoped lang="scss">
.yearRange {
display: flex;
align-items: center;

.devideLine {
    padding: 0 8px;
    color: #999;
    transform: scale(.6);
}

}
</style>

页面内引用
<yearRangePicker v-model:value="yearRange" start-placeholder="开始年份"
end-placeholder="结束年份"
/>

代码中的 value-format:'YYYY',YYYY为大写，部分项目中可能会导致无法选择时间,将其改为yyyy即可