VUE3下拉框筛选filter-method方法使用

dy1717

于 2025-07-01 15:39:08 发布

阅读量223

点赞数 1

CC 4.0 BY-SA版权

分类专栏： elementui 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/dy1717/article/details/149039461

elementui 专栏收录该内容

21 篇文章

订阅专栏

需求：通过筛选，下拉框显示与筛选符合的值。

本来可以使用 filterable 就可以了，但是这个我先加上之后没有匹配到合适的，百度后了解这个属性只能为简单的字段进行筛选，我的下拉框值全是中文，筛选就不精准找不到人。

    <el-form-item :label="$t('邮件通知人:')" prop="changeUser" style="width: 100%">
            <el-select v-model="ruleForm.changeUser" filterable multiple placeholder="请选择邮件通知人" :filter-method="customFilterMethod">
              <el-option v-for="item in dialogInfo.options" :key="item.emp_name" :label="item.emp_name" :value="item.email" />
            </el-select>

我这里是选多个，所以我绑定的ruleForm.changeUser是数组，dialogInfo. 是从接口获取的原始数据。

//筛选方法
const customFilterMethod = (query) => {
  const normalizedQuery = query ? query.trim().toLowerCase() : ''

  if (normalizedQuery) {
    dialogInfo.options = dialogInfo.filterOption.filter((item) => item.emp_name.trim().toLowerCase().includes(normalizedQuery))
  } else {
    dialogInfo.options = dialogInfo.filterOption
  }
}