1

我想要的是能够默认在 v-select 组件中选择一个选项。这里

<!-- Filter for calories -->
<v-select
    :items="caloriesList"
    v-model="caloriesFilterValue"
    label="Calories"
></v-select>

根据文档，默认情况下使用 v-model 属性进行选择，但我使用该属性能够执行过滤（v-model="caloriesFilterValue"）

Vuetify v2 Vuejs v.2.6

组件代码

<template>
    <v-data-table :headers="headers" :items="desserts" item-key="name" class="elevation-1 pa-6">
        <template v-slot:top>
            <!-- v-container, v-col and v-row are just for decoration purposes. -->
            <v-container fluid>
                <v-row>

                    <v-col cols="6">
                        <v-row class="pa-6">
                            <!-- Filter for dessert name-->
                            <v-text-field v-model="dessertFilterValue" type="text" label="Name"></v-text-field>
                        </v-row>
                    </v-col>

                    <v-col cols="6">
                        <v-row class="pa-6">
                            <!-- Filter for calories -->
                            <v-select
                                    :items="caloriesList"
                                    v-model="caloriesFilterValue"
                                    label="Calories"
                            ></v-select>
                        </v-row>
                    </v-col>

                </v-row>
            </v-container>

        </template>
    </v-data-table>
</template>

<script>
  // Table info.
  import tableData from './sampleDataTable';

  export default {
    data() {
      return {
        // We need some values for our select.
        caloriesList: [
          {text: "All", value: null},
          {text: "Only 237", value: 237},
          {text: "Only 305", value: 305},
        ],

        // Filter models.
        dessertFilterValue: '',
        caloriesFilterValue: null,

        // Table data.
        desserts: tableData.data,
      }
    },
    computed: {
      headers() {
        return [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name',
            filter: this.nameFilter,
          },
          {
            text: 'Calories',
            value: 'calories',
            filter: this.caloriesFilter,
          },
          {text: 'Fat (g)', value: 'fat'},
          {text: 'Carbs (g)', value: 'carbs'},
          {text: 'Protein (g)', value: 'protein'},
          {text: 'Iron (%)', value: 'iron'},
        ]
      },
    },
    methods: {
      /**
       * Filter for dessert names column.
       * @param value Value to be tested.
       * @returns {boolean}
       */
      nameFilter(value) {
        // If this filter has no value we just skip the entire filter.
        if (!this.dessertFilterValue) {
          return true;
        }

        // Check if the current loop value (The dessert name)
        // partially contains the searched word.
        return value.toLowerCase().includes(this.dessertFilterValue.toLowerCase());
      },

      /**
       * Filter for calories column.
       * @param value Value to be tested.
       * @returns {boolean}
       */
      caloriesFilter(value) {

        // If this filter has no value we just skip the entire filter.
        if (!this.caloriesFilterValue) {
          return true;
        }

        // Check if the current loop value (The calories value)
        // equals to the selected value at the <v-select>.
        return value === this.caloriesFilterValue;
      }
    }
  }
</script>

导入的数据 import tableData from './sampleDataTable';

{
  "data": [
    {
      "name": "Frozen Yogurt",
      "calories": 159,
      "fat": 6.0,
      "carbs": 24,
      "protein": 4.0,
      "iron": "1%"
    },
    {
      "name": "Ice cream sandwich",
      "calories": 237,
      "fat": 9.0,
      "carbs": 37,
      "protein": 4.3,
      "iron": "1%"
    },
    {
      "name": "Eclair",
      "calories": 262,
      "fat": 16.0,
      "carbs": 23,
      "protein": 6.0,
      "iron": "7%"
    },
    {
      "name": "Cupcake",
      "calories": 305,
      "fat": 3.7,
      "carbs": 67,
      "protein": 4.3,
      "iron": "8%"
    },
    {
      "name": "Gingerbread",
      "calories": 356,
      "fat": 16.0,
      "carbs": 49,
      "protein": 3.9,
      "iron": "16%"
    },
    {
      "name": "Jelly bean",
      "calories": 375,
      "fat": 0.0,
      "carbs": 94,
      "protein": 0.0,
      "iron": "0%"
    },
    {
      "name": "Lollipop",
      "calories": 392,
      "fat": 0.2,
      "carbs": 98,
      "protein": 0,
      "iron": "2%"
    },
    {
      "name": "Honeycomb",
      "calories": 408,
      "fat": 3.2,
      "carbs": 87,
      "protein": 6.5,
      "iron": "45%"
    },
    {
      "name": "Donut",
      "calories": 452,
      "fat": 25.0,
      "carbs": 51,
      "protein": 4.9,
      "iron": "22%"
    },
    {
      "name": "KitKat",
      "calories": 518,
      "fat": 26.0,
      "carbs": 65,
      "protein": 7,
      "iron": "6%"
    }
  ]
}
4

1 回答 1

1

如果我理解问题是什么，它应该像在 data() 中设置所需的默认卡路里值一样简单。

data() {
      return {
        // We need some values for our select.
        caloriesList: [
          {text: "All", value: null},
          {text: "Only 237", value: 237},
          {text: "Only 305", value: 305},
        ],
        
        caloriesFilterValue: 305,

        // Filter models.
        dessertFilterValue: '',
        ..
     }
},
...

演示

于 2020-11-10T17:43:12.137 回答