如何更改primevue过滤器的语言

sczxawaw 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(232)

如何在Prime Vue中更改过滤器标签？
我找到了一个类似的问题，如果不是相同的，没有一个工作答案。
This question有一个答案，它指出

const matchModesOptions = [
            {label: 'Gleich...', value: FilterMatchMode.EQUALS},
            {label: 'Nicht gleich...', value: FilterMatchMode.NOT_EQUALS},
            {label: 'Beginnt mit...', value: FilterMatchMode.STARTS_WITH},
            {label: 'Endet mit...', value: FilterMatchMode.ENDS_WITH},
            {label: 'Beinhaltet...', value: FilterMatchMode.CONTAINS}
        ]

虽然，在PrimeVue网站https://primevue.org/datatable/filter的第一个示例中使用，它似乎不起作用。

filters: {
              global: { value: null, matchMode: FilterMatchMode.CONTAINS },
              name: { operator: FilterOperator.AND, constraints: [{ label: "Test", value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
              "country.name": { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
              representative: { value: null, matchMode: FilterMatchMode.IN },
              date: { operator: FilterOperator.AND, constraints: [{ label: "Test", filterLocale: "de-DE", value: null, matchMode: FilterMatchMode.DATE_IS }] }
}

有人知道添加/定制这些标签的解决方案吗？（此外，有一个“添加规则”按钮，也需要翻译，但文档没有说明任何关于此...）

vue.js

来源：https://stackoverflow.com/questions/75445051/how-to-change-language-of-primevue-filters

1条答案

按热度按时间

pes8fvy91#

这是vuetify3：

<script>
export default {
  data() {
    return {
      search: '',
      tableHeaders: [
        {
          align: 'start',
          key: 'name',
          sortable: false,
          title: this.$t('nutrition.dessertHeader'),
        },
        {
          key: 'calories',
          title: this.$t('nutrition.caloriesHeader'),
        },
        {
          key: 'fat',
          title: this.$t('nutrition.fatHeader'),
        },
        {
          key: 'carbs',
          title: this.$t('nutrition.carbsHeader'),
        },
        {
          key: 'protein',
          title: this.$t('nutrition.proteinHeader'),
        },
        {
          key: 'iron',
          title: this.$t('nutrition.ironHeader'),
        },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: 1,
        },
        //...
      ],
    };
  },
  created() {
    // Set translations as data properties
    this.$data.nutrition = {
      title: this.$t('nutrition.title'),
      search: this.$t('nutrition.search'),
      dessertHeader: this.$t('nutrition.dessertHeader'),
      caloriesHeader: this.$t('nutrition.caloriesHeader'),
      fatHeader: this.$t('nutrition.fatHeader'),
      carbsHeader: this.$t('nutrition.carbsHeader'),
      proteinHeader: this.$t('nutrition.proteinHeader'),
      ironHeader: this.$t('nutrition.ironHeader'),
    };
  },
};
</script>

<template>
  <v-card>
    <v-card-title>
      {{ $t('nutrition.title') }}
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        :label="$t('nutrition.search')"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table :headers="tableHeaders" :items="desserts" :search="search"></v-data-table>
  </v-card>
</template>

赞(0）回复(0）举报 2023-05-18

我来回答

如何更改primevue过滤器的语言

1条答案

相关问题

热门标签

最新问答