从 vue 过滤器中排除重音，使用 bootstrap-vue 表过滤器功能答案

【问题标题】：Excluding accents from the vue filter, using bootstrap-vue table filter feature从 vue 过滤器中排除重音，使用 bootstrap-vue 表过滤器功能
【发布时间】：2021-10-16 08:24:10
【问题描述】：

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

这个是正则表达式 sn-p:

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

表：

<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 表过滤器中，这可能吗？

【问题讨论】：

您真的要从表格中排除这些词吗？或者只是修改它们？您的正则表达式 sn-p 建议后者。
@tony19 我想在用户输入“á”或“ã”时过滤“a”，例如...只是为了忽略重音符号。

标签： javascript arrays vue.js bootstrap-vue

【解决方案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

【讨论】：