根据拼音或者首字母查名字，汉字也可以

最新推荐文章于 2023-04-15 20:54:05 发布

原创最新推荐文章于 2023-04-15 20:54:05 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用正则表达式配合Element UI Select组件，自定义过滤方法，实现实时根据用户输入搜索成员列表中`sname`和`snameCode`字段。重点在于展示了如何在 computed 中利用 `filterMethod` 和 `test` 方法进行动态匹配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.
后台返回的数组对象中有sname:"赵青",snameCode: "ZHAOQING"；
data() {
	return {
	regrex: /.*.*/i,  // 初始值
	}
}
2.
通过element ui的select的:filter-method="filterMethod"方法；
filterMethod(val){  //自定义搜索方法
                this.regrex = new RegExp(`.*${(val || "").split("").join(".*")}.*`,'i');
            }
3. 
在computed中：
realMemberList(){
                return this.memberList.filter(v => this.regrex.test(v.snameCode || "") || this.regrex.test(v.sname));
            },