如何将去除重音的正则规则集成到Bootstrap-Vue表格过滤器中

完全可以实现，你可以通过BootstrapVue Table提供的自定义过滤函数能力，把重音转换逻辑适配到过滤流程中，具体步骤如下：

步骤1：封装重音字符转换工具函数 #

先把你现有的正则片段封装成通用的去重音函数，注意要把正则写法从字符串改成正则字面量才能生效：

// 去除字符串中的重音字符
function removeAccents(str) {
  if (!str) return ''
  return str.toString().toLowerCase()
    .replace(/[áàãâä]/ui, 'a')
    .replace(/[éèêë]/ui, 'e')
    .replace(/[íìîï]/ui, 'i')
    .replace(/[óòõôö]/ui, 'o')
    .replace(/[úùûü]/ui, 'u')
    .replace(/[ç]/ui, 'c')
}

步骤2：定义自定义过滤函数 #

在Vue实例中新增自定义过滤方法，会在表格过滤时自动调用，对用户输入的关键词和表格单元格内容同时做去重音处理后再匹配：

// Vue2选项式API写法，写在methods配置项中
methods: {
  customFilter(cellValue, filterKeyword) {
    // 两边都做去重音、转小写处理后再判断包含关系
    const processedCell = removeAccents(cellValue)
    const processedFilter = removeAccents(filterKeyword)
    return processedCell.includes(processedFilter)
  }
}

// Vue3组合式API写法，定义后return即可
// const customFilter = (cellValue, filterKeyword) => {
//   const processedCell = removeAccents(cellValue)
//   const processedFilter = removeAccents(filterKeyword)
//   return processedCell.includes(processedFilter)
// }

步骤3：修改表格组件绑定 #

给b-table组件新增filter-function属性绑定你定义的自定义过滤函数即可，原有输入框、filter变量的定义都不需要修改：

<!-- 输入框代码保持不变 -->
<b-form-input
  id="filter-input"
  v-model="filter"
  type="search"
  placeholder="Pesquise por Zona, WhatsApp ou E-mail"
></b-form-input>

<!-- 表格新增filter-function属性 -->
<b-table :items="items"
         :fields="fields"
         :filter="filter"
         :filter-function="customFilter"
         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>

可选调整 #

如果需要指定仅部分字段参与过滤，可以给b-table加上filter-included-fields属性，传入要过滤的字段名数组即可，比如 :filter-included-fields="['zona', 'whatsapp', 'email']"。

内容的提问来源于stack exchange，提问作者Lucas Marra