使用引导- vue表筛选功能从vue筛选器中排除重音。

Question

我正在使用Bootrap-vue表和过滤结果，我需要帮助插入一个regex过滤器来排除带有重音的单词/字母。

这个是regex代码片段：

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,

所以我的问题是:如何将regex过滤器安装到引导-vue表过滤器中，这是可能的吗？

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">

演示