如何更改primvue过滤器的语言

Question

如何更改 Prime Vue 中的过滤器标签？

我发现了一个类似的问题（如果不是相同的问题），但没有有效的答案。

这个问题有一个答案，其中指出

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 }] }
}

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

Answer 1

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>

Answer 2

经过长时间的研究PrimeVue v3.28.0的源代码，我终于找到了标记自定义过滤器的方法，尽管它仍然是一个笨拙的解决方案。

如您所见，ColumnFilter 组件的定义中有一个名为

matchModes()

的计算方法，位于

datatable.js

中的第 2153 行。

matchModes() {
    return (
        this.matchModeOptions ||
        this.$primevue.config.filterMatchModeOptions[this.type].map((key) => {
            return { label: this.$primevue.config.locale[key], value: key };
        })
    );
}

该方法用作第2360行Dropdown组件的

options

参数。

matchModes()

返回的元素的label属性就是我们最终想要显示的内容。

vue.createBlock(_component_CFDropdown, {
    key: 0,
    options: $options.matchModes,
    modelValue: fieldConstraint.matchMode,
    class: "p-column-filter-matchmode-dropdown",
    optionLabel: "label",
    optionValue: "value",
    "aria-label": $options.filterConstraintAriaLabel,
    "onUpdate:modelValue": $event => ($options.onMenuMatchModeChange($event, i))
  }, null, 8, ["options", "modelValue", "aria-label", "onUpdate:modelValue"])

但是，根据上面

matchModes()

方法的定义，如果我们定义的过滤器不属于

dataType

中定义的任何

primevue.config.filterMatchModeOptions

，那么它会直接返回一个没有标签的纯字符串，这样就导致没有文本正在显示。

使用 Composition API 编写的临时解决方案如下，假设我已经为使用 moment.js 的自定义日期字段注册了自定义过滤器：

在

<script>

块中：

import { usePrimeVue } from 'primevue/config';

const PrimeVue = usePrimeVue();

PrimeVue.config.filterMatchModeOptions.MomentDateTime = ['filterByDateTimeEquals'];

PrimeVue.config.locale.filterByDateTimeEquals = PrimeVue.config.locale.dateIs;

FilterService.register('filterByDateTimeEquals', (datetime, value) => {
    if (!value) return true;
    return TimeService.Backend.toJSDate(datetime).getTime() == value.getTime();
});

在

<template>

块中，省略部分：

<DataTable>
    ...
    <!--Here, a dataType is added-->
    <Column field="birthDate" header="Birth Date" dataType="MomentDateTime">
        <template #body="{ data }">
            {{ TimeService.Frontend.fromDate(data.birthDate) }}
        </template>
        <template #filter="{ filterModel }">
            <Calendar v-model="filterModel.value" dateFormat="yy/mm/dd" :placeholder="moment().format('YYYY/MM/DD')" />
        </template>
    </Column>
    ...
</DataTable>

但是，这个解决方案仍然不够优雅。我已经在 GitHub 上提出了issue，要求开发团队解决这个问题，等待他们的回复。

Answer 3

您可以使用 PrimeVue 配置选项

import PrimeVue, { PrimeVueConfiguration } from 'primevue/config';
  app.use(PrimeVue, {
    locale:{ matchAll: "جميع الشروط", .... }
  } as PrimeVueConfiguration);

或者，您也可以只修改其中的一部分，如下所示：

import PrimeVue, { PrimeVueConfiguration, defaultOptions } from 'primevue/config';

app.use(PrimeVue, {
    locale: {
      ...defaultOptions.locale,
      matchAll: "جميع الشروط" }
} as PrimeVueConfiguration);

我希望这有帮助！如果您还有其他问题，请告诉我。