时间戳

首页 > 解决方案 > 如何根据 Vuejs 中的文本和日期范围选择器过滤数组？

javascript - 如何根据 Vuejs 中的文本和日期范围选择器过滤数组？

问题描述

我有一个input用户可以搜索标题的地方。使用mengxiong10/vue2-datepicker 的日期选择器。（欢迎任何其他选择器）

如何仅按搜索、仅日期或同时按搜索和日期过滤数组？（通过标题作品搜索）。

搜索如何在数组与嵌套数组中进行？

HTML-

<input class="form-control" type="text" v-model="search" placeholder="Search" /></div>  
<date-picker v-model="datefilter" range></date-picker>

<div v-for="item in resultQuery">
 {{item.title}}
</div>

Vuejs-

<script>
  import DatePicker from 'vue2-datepicker';
  import 'vue2-datepicker/index.css';

  export default {
    el: '#app',
    components: { DatePicker },
    data() {
      return {
        search: null,
        resources:[
            {title:"AAA",date: 1622192760},
            {title:"BBB",date: 1622624760},
            {title:"CCC",date: 1620810360},
            {title:"DDD",date: 1625907960},
            {title:"EEE",date: 1623315960},
        ],
        resources2:[
            {id:1,items: [{ title: 'a',date: 1622192760 }, {name: 'aa', date: 1622624760 }]},
            {id:2,items: [{ title: 'b',date: 1623315960 }, {name: 'bb', date: 1625907960 }]},
            {id:3,items: [{ title: 'c',date: 1622624760 }, {name: 'cc', date: 1622624760 }]},
            {id:4,items: [{ title: 'd',date: 1622624760 }, {name: 'dd', date: 1622624760 }]},
            {id:5,items: [{ title: 'e',date: 1622192760 }, {name: 'ee', date: 1622624760 }]},
        ],

        datefilter: null,
      };
    },
    computed: {
    resultQuery(){
      if(this.search){
      return this.resources.filter((item)=>{
        return item.title.toLowerCase().includes(this.search.toLowerCase())) }
      })
      }else{
        return this.resources;
      }
    }
  }
  };
</script>

标签： javascriptvue.jssearchfilterdatepicker

解决方案

您可以将过滤分解为自己的功能：

const byDate = (item) => {
  const itemDate = new Date(item.date);
  return itemDate >= new Date(this.datefilter[0]) &&
         itemDate <= new Date(this.datefilter[1])
}

const byTitle = (item) =>
  item.title.toLowerCase().includes(this.search.toLowerCase())

然后this.resources.filter()在搜索字段不为空或选择日期范围时将它们传递给：

export default {
  computed: {
    resultQuery() {
      //...
      let results = this.resources

      if (this.search) {
        results = results.filter(byTitle)
      }

      const hasDateFilter = this.datefilter?.length >= 2 && this.datefilter[0] && this.datefilter[1]
      if (hasDateFilter) {
        results = results.filter(byDate)
      }

      return results
    }
  }
}

演示

推荐阅读