Question

我是vuetify的新手，我正在使用日期选择器过滤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

一种方法是在 change 中监听 v-date-picker 事件，因此在本例中我创建了一个函数调用 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 中，这样当我们过滤项目时，数据仍然存在。您可能需要找到一种方法来比较日期。

希望这有帮助 (:

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

1 个答案: