vue3中按日期查询接口返回的数据

最新推荐文章于 2024-12-25 16:18:57 发布

原创最新推荐文章于 2024-12-25 16:18:57 发布 · 1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #webstorm

文章展示了如何在Vue.js应用中使用el-date-picker组件选择日期和时间范围，并通过handleSearch函数进行查询。查询功能基于用户选定的开始和结束时间，筛选出介于这两个时间点之间的数据记录。

1.需要准备：接口数据、el-date-picker组件、查询函数

2.html部分：

<el-date-picker
            v-model="value1"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetime"
            placeholder="开始日期"
            align="right"
    ></el-date-picker>
    至
    <el-date-picker
            v-model="value2"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetime"
            placeholder="结束日期"
            align="right"
    ></el-date-picker>
    <el-button type="primary" icon="el-icon-search" @click="handleSearch" >查询</el-button>

3.js部分：

 import {reactive, ref} from "vue";
export default {
        setup(){
         //data为接口返回的数据，可自己模拟设置
        const data = reactive({ arr: [{time: "2022-1-4 17:43:46",name:1},
                    {time: "2022-12-20 17:43:46",name:2},
                    {time: "2022-12-10 17:43:46",name:3},
                    {time: "2022-12-01 17:43:46",name:4},
                    {time: "2022-11-29 17:43:46",name:5},
                    {time: "2022-10-29 17:43:46",name:6},
                    {time: "2022-10-10 17:43:46",name:7},
                    {time: "2022-9-29 17:43:46",name:8},
                    {time: "2022-8-29 17:43:46",name:9},] });
            const value1 = ref("");
            const value2 = ref("");

            const handleSearch=function(){//查询函数
               if(value2.value.length>1 && value1.value.length>1){//判断起始时间和终止时间是否有数据
                    var a= new Date(value1.value).getTime()//转换为时间戳
                    var b= new Date(value2.value).getTime()
                    console.log(a)
                    console.log(b)
                    let data2=reactive({arr:[]})//接收符合规定时间的数据
                    for (var i in data.arr){//循环判断
                        var c=new Date(data.arr[i].time).getTime()//将data中的时间转换为时间戳
                        // console.log(c)
                        if(c>=a && c<=b){//判断是否在规定时间内，如果在，将该条数据push进data2
                            data2.arr.push(data.arr[i])
                            console.log(data.arr[i].time)//打印符合规定时间的数据日期
                        }
                    }
                    data.arr=data2.arr//把符合规定的数据传递给data
                    console.log(data.arr)//打印最终符合时间的data
                    }

            }
          
            return{value2,value1,handleSearch}
        }

    }

4.演示

起始时间设置为2022-11-10 00:00:00 ，终止时间设置为2023-01-05 14:57:18。

点击查询，控制台显示查询后的data