Vue筛选时通过 v-for 实现年份自动递增，供大家参考，具体内容如下
在做数据筛选时一般会用到Element-UI组件的方式进行编写，偶尔也会用平铺的方式对时间进行筛选(类似购物网站的筛选功能)，并实现年份的自动增加
以下是用平铺的方式对数据筛选 (已省略表格)
部分解释的可能不太清楚，但也可以实现的
效果图如下
当年份为2022时
当年份为2030时
代码如下
<template>
<div>
<div class="block">
<span>年份
<el-button class="btnclick" v-for="(item, index) in yearlist" :key="index" size="mini"
@click="handleFilterYear(item)" round>
{{ item.DText }}
</el-button>
</span>
</div>
<div class="block">
<span>月份
<el-button class="btnclick" v-for="(item, index) in mouthlist" :key="index" size="mini"
@click="handleFilterMouth(item)" round>
{{ item.DText }}
</el-button>
<el-button class="btnclick" type="primary" size="mini" @click="searchClearFun()">重置
</el-button>
</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
serch1: new Date().getFullYear(), //年 默认传当年年份
serch2: '', //月
yearlist: [{ //年
Index: 0,
DText: '2022'
}],
mouthlist: [{ //月
Index: 0,
DText: '1'
}, {
Index: 1,
DText: '2'
}, {
Index: 2,
DText: '3'
}, {
Index: 3,
DText: '4'
}, {
Index: 4,
DText: '5'
}, {
Index: 5,
DText: '6'
}, {
Index: 6,
DText: '7'
}, {
Index: 7,
DText: '8'
}, {
Index: 8,
DText: '9'
}, {
Index: 9,
DText: '10'
}, {
Index: 10,
DText: '11'
}, {
Index: 11,
DText: '12'
}]
}
}
mounted() {
// 定义年份列表 ，默认为今年 2022 ，当2023时会自动显示 2022 2023 .....
var nowYearList = new Date().getFullYear();
var nowYearLength = parseInt(nowYearList) - 2022;
if (nowYearLength > 0) {
if (nowYearLength < 2) {
this.yearlist = [{
Index: 0,
DText: '2022'
}]
} else {
var yearListArr = [];
for (var i = 0; i <= nowYearLength; i++) {
var yearObj = {};
yearObj.Index = i;
yearObj.DText = parseInt(2022 + i);
yearListArr.push(yearObj)
}
this.yearlist = yearListArr
}
}
}
methods: {
//年份筛选
handleFilterYear(item) {
this.serch1 = item.DText
this.dataCount(); //调用数据列表的方法
},
// 月份筛选
handleFilterMouth(item) {
this.serch2 = item.DText
this.dataCount(); //调用数据列表的方法
},
//清空查询
searchClearFun() {
this.serch1 = '' //清空年份
this.serch2 = '' //清空月份
this.dataCount() //调用数据列表的方法
},
}
}
</script>
<style scoped lang="scss">
.block span {
font-size: 15px;
display: block;
text-align: left;
padding: 20px 0 0 20px;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
