小编Vit*_*iak的帖子

Vuetify 2.2 DataTable 多个过滤器

我是 vue.js 的新手,请帮忙。我的表中需要过滤器。每列必须有多个按值选择筛选器。当我们单击列标题时 - 下拉多选打开,我们可以选择过滤值。例如,像这样的Vuetify 数据表内联过滤器,但此示例不适用于 vuetify 2。 在此输入图像描述

我的HTML:

<template>
 <v-card class="elevation-3">
         <v-card-title>
           {{ other_title }}
           <v-btn style="background-color: white; box-shadow: none;" @click="csvExport(other_title, otherIncidentsData)">
               CSV<i class="fas fa-file-csv"></i>
           </v-btn>
           <v-btn text @click="exportToPdf()">
              Pdf<v-icon>mdi-file-pdf-box-outline</v-icon>
            </v-btn>
            <v-btn text @click="showExportModal">
              <v-icon>mdi-email-receive-outline</v-icon>
            </v-btn>
           <v-spacer></v-spacer>
           <v-text-field
             v-model="search"
             append-icon="mdi-magnify"
             label="Search"
             single-line
             hide-details
           ></v-text-field>
         </v-card-title>
         <v-data-table
           :search="search"
           :headers="headers"
           :items="otherIncidents"
           :items-per-page="10"
         >
          <template v-slot:item.priority.name="{ item }">
              <v-chip :color="getPriorityColor(item.priority.name)" dark>{{ item.priority.name }}</v-chip>
          </template>
         </v-data-table>
        </v-card>
</template>
Run Code Online (Sandbox Code Playgroud)

还有JS:

 export default {
      mixins: [
        mixin
      ],
      data() {
        return {
          search: …
Run Code Online (Sandbox Code Playgroud)

vue.js vuejs2 vuetify.js v-data-table

3
推荐指数
1
解决办法
1万
查看次数

标签 统计

v-data-table ×1

vue.js ×1

vuejs2 ×1

vuetify.js ×1