在做數(shù)據(jù)篩選時(shí)一般會(huì)用到Element-UI組件的方式進(jìn)行編寫(xiě)，偶爾也會(huì)用平鋪的方式對(duì)時(shí)間進(jìn)行篩選(類(lèi)似購(gòu)物網(wǎng)站的篩選功能)，并實(shí)現(xiàn)年份的自動(dòng)增加

以下是用平鋪的方式對(duì)數(shù)據(jù)篩選 (已省略表格)
部分解釋的可能不太清楚，但也可以實(shí)現(xiàn)的

效果圖如下

當(dāng)年份為2022時(shí)

當(dāng)年份為2030時(shí)

代碼如下

<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(), //年 ?默認(rèn)傳當(dāng)年年份
? ? ? ? ? ? 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() {
? ? ? ? // 定義年份列表 ，默認(rèn)為今年 2022 ，當(dāng)2023時(shí)會(huì)自動(dòng)顯示 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(); ? //調(diào)用數(shù)據(jù)列表的方法
? ? ? ? },
? ? ? ? // 月份篩選
? ? ? ? handleFilterMouth(item) {
? ? ? ? ? ? this.serch2 = item.DText
? ? ? ? ? ? this.dataCount(); ?//調(diào)用數(shù)據(jù)列表的方法
? ? ? ? },
? ? ? ? //清空查詢(xún)
? ? ? ? searchClearFun() {
? ? ? ? ? ? this.serch1 = '' ?//清空年份
? ? ? ? ? ? this.serch2 = '' ?//清空月份
? ? ? ? ? ? this.dataCount() //調(diào)用數(shù)據(jù)列表的方法
? ? ? ? },
? ? }
}
</script>
<style scoped lang="scss">
? ?.block span {
? ? ? font-size: 15px;
? ? ? display: block;
? ? ? text-align: left;
? ? ? padding: 20px 0 0 20px;
? ? }
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: