时间戳

首页 > 解决方案 > VueJs过滤表中的日期

javascript - VueJs过滤表中的日期

问题描述

我有一个问题要问你们，我有一个包含本季度学生时间信息和日期的表格。我想添加一个时间选择器，以便教师可以选择仅显示该日期和那一天之间的信息。

基本上，我想使用进入时间字段来过滤和显示从 x 日期到 x 日期的数据。

这是我的代码

<v-card>
        <v-card-title>
          Student Profile
          <v-spacer></v-spacer>              
        </v-card-title>
  <v-data-table :headers="headers2"
                :pagination.sync="pagination2"
                :items="profile"
                :search="search">
    <template slot="items" slot-scope="props">
      <td>{{ props.item.sid }}</td>
      <td class="text-xs-left">{{ props.item.firstName }}</td>
      <td class="text-xs-left">{{ props.item.lastName }}</td>
      <td class="text-xs-left">{{ props.item.course }}</td>
      <td class="text-xs-left">{{ props.item.entryTime }}</td>
      <td class="text-xs-left">{{ props.item.exitTime }}</td>
      <td class="text-xs-left">{{ props.item.duration }}</td>
    </template>
    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Your search for "{{ searchQuery }}" found no results.
    </v-alert>
  </v-data-table>
</v-card>

方法

 methods: {
  editStudent(sid) {
    this.dialog = true;
    this.editedSid = sid;
    axios.get('/api/e', {
      params: {
        'sid': this.editedSid
      }
    }).then(response => {
      this.profile = response.data
    }).catch(e => {
      console.log(e)
    })
  }
}

有什么建议么？

标签： javascriptvue.jsvuejs2vuetify.js

解决方案

您要做的是添加一个过滤原始数据的“计算属性”，然后使用它。

就像是

computed: {
 filteredEntries(){

   return this.profile.filter(entry => {
      //check if the entry is between the selected dated
   });

 }
}

然后在初始化表时使用“this.filteredEntries”而不是“this.profile”。

推荐阅读