Vue年份自动递增
小猫喵了个咪哒~ 人气:0Vue筛选时通过 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>
加载全部内容