Question

您好，我的自定义过滤器有问题，图片中有红色边框

它可以搜索绿色边框的文本，但不能搜索红色边框的文本。另一个数组像 test_1, test_2 没有问题我想是因为dessert_2 在test_3 里面有数组是吗？以及如何编辑自定义过滤器以搜索所有这些？

{
"name": "Frozen Yogurt",
"calories": 159,
"fat": 6,
"test_1": "iop",
"test_2": "mhj",
"test_3": [
  {
    "app_1": "ryt",
    "app_2": "xdf"
  }
]

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" />

</head>

<body>
    <div id="app">
        <v-app>
            <template>
                <v-data-table item-key="index" class="elevation-1" :headers="headers_2" :items="itemsWithIndex"
                    :search="search" :custom-filter="customSearch" :expanded.sync="expanded" show-expand multi-sort>
                    <template v-slot:expanded-item="{ headers, item }">
                        <td :colspan="headers.length">
                            <v-card flat>
                                <v-card-text class="style">
                                    <v-row>
                                        <v-col cols="6">
                                            <v-simple-table class="style">
                                                <template v-slot:top>
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center">test_1</th>
                                                            <th class="text-center">test_2</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>{{ item.test_1 }}</td>
                                                            <td>{{ item.test_2 }}</td>
                                                        </tr>
                                                    </tbody>
                                                </template>
                                            </v-simple-table>
                                        </v-col>

                                        <v-col cols="6">
                                            <v-simple-table class="style">
                                                <template v-slot:top>
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center">#</th>
                                                            <th class="text-center">app_1</th>
                                                            <th class="text-center">app_2</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr v-for="(edit, index) in item.test_3" :key="index">
                                                            <td>{{ index + 1 }}</td>
                                                            <td>{{ edit.app_1 }}</td>
                                                            <td>{{ edit.app_2 }}</td>
                                                        </tr>
                                                    </tbody>
                                                </template>
                                            </v-simple-table>
                                        </v-col>
                                    </v-row>
                                </v-card-text>
                            </v-card>
                        </td>
                    </template>
                    <template v-slot:top>
                        <v-toolbar flat color="white">
                            <div class="mx-2">
                                <v-btn small color="primary" @click="expandAll">Expand All</v-btn>
                            </div>
                            <div class="mx-2">
                                <v-btn small color="error" @click="collapseAll">collapse All</v-btn>
                            </div>

                            <v-spacer></v-spacer>
                            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line
                                hide-details></v-text-field>
                        </v-toolbar>
                    </template>
                </v-data-table>
            </template>
            <pre>{{ this.desserts_2 }}</pre>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
<script>
    new Vue({
              el: '#app',
              vuetify: new Vuetify(),
              data: {
               search: "",
                expanded: [],

                headers_2: [
                  {
                    text: "Dessert (100g serving)",
                    align: "start",
                    sortable: false,
                    value: "name",
                  },
                  { text: "Calories", value: "calories" },
                  { text: "Fat (g)", value: "fat" },
                ],

                desserts_2: [
                  {
                    name: "Frozen Yogurt",
                    calories: 159,
                    fat: 6.0,
                    test_1: "iop",
                    test_2: "mhj",
                    test_3: [
                      {
                        app_1: "ryt",
                        app_2: "xdf",
                      },
                    ],
                  },
                  {
                    name: "Ice cream sandwich",
                    calories: 237,
                    fat: 9.0,
                    test_1: "fgh",
                    test_2: "asd",
                    test_3: [
                      {
                        app_1: "ydf",
                        app_2: "huj",
                      },
                    ],
                  },
                ],
              },

              computed: {
                itemsWithIndex() {
                  return this.desserts_2.map((desserts_2, index) => ({
                    ...desserts_2,
                    index: index + 1,
                  }));
                },
              },

              methods: {
                customSearch(value, search, item) {
                  return Object.values(item).some(
                    (v) => v && v.toString().includes(search)
                  );
                },

                expandAll: function() {
                  console.log("All expanded.");
                  this.$data.expanded = this.itemsWithIndex;
                },
                collapseAll: function() {
                  console.log("All collapsed.");
                  this.$data.expanded = [];
                },
              },

     })
</script>

</html>

Answer 1

你是对的，这是因为 desserts_2 在 test_3 中有数组。

您只需要更改 customSearch 方法，例如，像这样：

customSearch(value, search, item) {
  return Object.values(item).some(
    (v) => {
      if (typeof (v) === 'object') {
        return v.some(v1 => {
          return Object.values(v1).some(
            (v2) => {
              return v2 && v2.toString().includes(search)
            }
          )
        });
      } else {
        return v && v.toString().includes(search);
      }
    }
  );
},

Vuetify，如何自定义过滤器

1 个答案: