Vue通过v-for实现年份自动递增

Vue筛选时通过v-for实现年份自动递增，供大家参考，具体内容如下在做数据筛选时一般会用到Element-UI组件的方式进行编写，偶尔也会用平铺的方式对时间进行筛选(类似购物网站的筛选功能)，并...

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)ZvZPM" 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="seZvZPMarchClearFun()">重置
        </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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。