使用 bootstrap-vue table 过滤器功能从 vue 过滤器中排除口音

Question

我正在使用 Bootrap-vue Table and filtering results，我需要帮助来插入正则表达式过滤器以排除带有重音符号的 words/letters。

这是正则表达式片段：

string.replace('/[áàãâä]/ui', 'a');
string.replace('/[éèêë]/ui', 'e');
string.replace('/[íìîï]/ui', 'i');
string.replace('/[óòõôö]/ui', 'o');
string.replace('/[úùûü]/ui', 'u');
string.replace('/[ç]/ui', 'c');

让用户键入的输入：

              <b-form-input
                id="filter-input"
                v-model="filter"
                type="search"
                placeholder="Pesquise por Zona, WhatsApp ou E-mail"
              ></b-form-input

Table:

<b-table :items="items"
                   :fields="fields"
                   :filter="filter"
                   hover
                   striped>
            <template #cell(whatsapp)="data">
              <span v-html="data.value"></span>
            </template>
            <template #cell(email)="data">
              <span v-html="data.value"></span>
            </template>
</b-table>

最后，vue 过滤行：

filter: null,

所以我的问题是：如何将正则表达式过滤器放入 bootstrap-vue table 过滤器中，这可能吗？

Answer 1

您可以使用计算属性从 filter 属性创建正则表达式，用可能的字母重音符号替换未修饰的字母：

export default {
  computed: {
    computedFilter() {
      const pattern = this.filter
          .replace(/a/g, '[aáàãâä]')
          .replace(/e/g, '[eéèêë]')
          .replace(/i/g, '[iíìîï]')
          .replace(/o/g, '[oóòõôö]')
          .replace(/u/g, '[uúùûü]')
          .replace(/c/g, '[cç]')
      return new RegExp(pattern, 'ui')
    }
  }
}

然后在模板中使用计算属性：

<b-table :filter="computedFilter">

demo

使用 bootstrap-vue table 过滤器功能从 vue 过滤器中排除口音

Excluding accents from the vue filter, using bootstrap-vue table filter feature

javascript

arrays

vue.js

bootstrap-vue