使用 daepicker 在 vuetify 中过滤数据表？

Question

我是 vuetify 的新手，我正在使用 datepicker 过滤 vuetify 数据表 [ from:date - to:date ]，我无法解决将选择的日期与表中的日期进行比较的部分并对数据进行过滤处理。 enter code here

<script>
  export default {
    data: vm => ({
      date: new Date().toISOString().substr(0, 10),
      dateFormatted: vm.formatDate(new Date().toISOString().substr(0, 10)),
      menu1: false,
      menu2: false,
      search:'',
       headers: [
        {
          text: 'Names',
          align: 'left',
          value: 'name'
        },
        {
          text: 'Birth date',
          value: 'birth_date'
        },

      ],
      rows: [
        {
          value: false,
          name: 'Marcelo Tosco',
          birth_date: 1538006400000,
        },
        {
          value: false,
          name: 'Carlos Campos',
          birth_date: 1537401600000,
        },
        {
          value: false,
          name: 'Luis Gonzalez',
          birth_date: 1536537600000,
        },
        {
          value: false,
          name: 'Keopx',
          birth_date: 1536364800000,
        },
        {
          value: false,
          name: 'Marco Marocchi',
          birth_date: 1535846400000,
        },
      ]
    }),

    computed: {
      computedDateFormatted () {
        return this.formatDate(this.date)
      },
    },

    watch: {
      // eslint-disable-next-line no-unused-vars
      date (val) {
        this.dateFormatted = this.formatDate(this.date)
      },
    },

    methods: {
      formatDate (date) {
        if (!date) return null

        const [year, month, day] = date.split('-')
        return `${month}/${day}/${year}`
      },
      parseDate (date) {
        if (!date) return null

        const [month, day, year] = date.split('/')
        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      },
    },
  }
</script>

                    <v-container fluid  class="page-name">
                        <v-row>
                            <v-col cols="8">
                                <v-row class="pa-6">
                                    <!-- Filter for dessert name-->
                                    <v-text-field
                                        v-model="search"
                                        append-icon="search"
                                        label="بحث"
                                        single-line
                                        hide-details>
                                    </v-text-field>
                                </v-row>
                             </v-col>

                                <v-row>
                                <v-col cols="12" lg="6">
                                    <v-menu
                                    ref="menu1"
                                    v-model="menu1"
                                    :close-on-content-click="false"
                                    transition="scale-transition"
                                    offset-y
                                    max-width="290px"
                                    min-width="290px"
                                    >
                                    <template v-slot:activator="{ on, attrs }">
                                        <v-text-field
                                        v-model="dateFormatted"
                                        label="Date"
                                        hint="MM/DD/YYYY format"
                                        persistent-hint
                                        prepend-icon="event"
                                        v-bind="attrs"
                                        @blur="date = parseDate(dateFormatted)"
                                        v-on="on"
                                        ></v-text-field>
                                    </template>
                                    <v-date-picker v-model="date" no-title @input="menu1 = false"></v-date-picker>
                                    </v-menu>
                                </v-col>

                                <v-col cols="12" lg="6">
                                    <v-menu
                                    v-model="menu2"
                                    :close-on-content-click="false"
                                    transition="scale-transition"
                                    offset-y
                                    max-width="290px"
                                    min-width="290px"
                                    >
                                    <template v-slot:activator="{ on, attrs }">
                                        <v-text-field
                                        v-model="computedDateFormatted"
                                        label="Date (read only text field)"
                                        hint="MM/DD/YYYY format"
                                        persistent-hint
                                        prepend-icon="event"
                                        readonly
                                        v-bind="attrs"
                                        v-on="on"
                                        ></v-text-field>
                                    </template>
                                    <v-date-picke`enter code here`r v-model="date" no-title @input="menu2 = false"></v-date-picker>
                                    </v-menu>
                                </v-col>
                                </v-row>

                        </v-row>

                    </v-container>
                </template>

              </v-data-table>
enter code here

Answer 1

一种方法是在v-date-picker 中监听change 事件，所以在这种情况下，我创建了一个函数调用filterDate 来监听变化

<v-date-picker
    v-model="date"
    @change="filterDate"
>

<v-data-table
    :headers="headers"
    :items="rows"
>

// In data defines a variable dates
    date: undefined

// In method
filterDate() {
    if (this.date !== undefined) {
        this.rows = this.copyOfRows.filter((item) => item.birthday == this.date)
    }
}

在我的例子中，我将原始数据存储在 vuex 中的 v-data-table 中，这样当我们过滤项目时，数据仍然存在。 您可能必须想办法比较日期。

希望这会有所帮助（：