实现背景
因为后端实现人员列表返回，每次返回的数据量在100以内，要求前端自己进行模糊搜索
页面实现
因为是实时更新数据的，就不需要搜索和重置按钮了
代码
HTML
<el-dialog
title="团队人员详情"
:visible.sync="centerDialogVisible"
width="30%"
center
:close-on-click-modal="false"
>
<el-row :gutter="20">
<el-col :span="10">
<el-input v-model="keyword" placeholder="请输入姓名或身份证查询"></el-input>
</el-col>
</el-row>
<el-table :data="filteredItems" height="350">
<el-table-column property="name" label="姓名" align="center"></el-table-column>
<el-table-column property="idCard" label="身份证" align="center"></el-table-
column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>js
// 计算属性
computed: {
filteredItems() {
// if (!this.keyword) {
// return this.userList
// }
return this.userList.filter(item =>{
return item.idCard.includes(this.keyword) || item.name.includes(this.keyword)
});
}
},效果
注意点1：我在data中定义keyword时候第一次使用的是默认值 undefined 导致includes出来的结果是空。
注意点2：我在返回数据中定义的身份证号是number类型，在计算时候直接报错为类型错误，不能使用includes函数。需要转换为字符串类型
computed的实现方式很简洁，主要借助一个计算属性，在计算属性中通过搜索关键词过滤原始列表数据得到新的数据列表，并将新数据列表渲染到页面。
值得注意的地方：
abc.indexOf('a')的返回值是0，而abc.indexOf('')的返回值也是0。
因此，在一开始没有输入任何数据的时候，计算属性列表filterFruitList中经过计算得到的数据和原始列表数据fruitList是一样的。
这里最重要的是没有对原来的数据进行修改和删除
也可以使用watch监听数据变化
GPT提供的方法
在Vue2中，你可以按照以下步骤实现后端返回的带有姓名和身份证信息的List进行展示，并添加静态模糊搜索和搜索重置功能。
首先，在Vue组件中定义需要的数据变量：
data() {
return {
userList: [], // 存储后端返回的列表数据
keyword: '', // 存储搜索关键字
filteredList: [] // 存储搜索结果数据
};
}然后，使用生命周期钩子函数 mounted() 在组件加载时获取后端数据：
mounted() {
// 调用后端API获取数据（示例）
yourApi.getUserList().then(response => {
this.userList = response.data;
});
}在模板中，你可以使用一个输入框和一个搜索按钮以及一个重置按钮：
<input type="text" v-model="keyword" placeholder="请输入搜索关键字">
<button @click="search">搜索</button>
<button @click="reset">重置</button>接下来，在Vue组件中实现静态模糊搜索和搜索重置功能的两个方法：
methods: {
search() {
if (this.keyword.trim() === '') {
this.filteredList = this.userList;
} else {
const keywordLowerCase = this.keyword.toLowerCase();
this.filteredList = this.userList.filter(user => {
const nameMatch = user.name.toLowerCase().includes(keywordLowerCase);
const idCardMatch = user.idCard.toLowerCase().includes(keywordLowerCase);
return nameMatch || idCardMatch;
});
}
},
reset() {
this.keyword = '';
this.filteredList = this.userList;
}
}在 `search` 方法中，首先判断关键字是否为空，如果为空则直接将 `filteredList` 设置为原始列表数据 `userList`，否则根据关键字对 `userList` 进行静态模糊搜索，并将结果赋值给 `filteredList`。
在 `reset` 方法中，将关键字重置为空字符串，并将 `filteredList` 设置为原始列表数据 `userList`。
最后，在模板中使用 `v-for` 遍历 `filteredList`，展示搜索结果：
<ul>
<li v-for="user in filteredList" :key="user.id">
{{ user.name }} - {{ user.idCard }}
</li>
</ul>综上所述，你可以按照以上步骤，使用Vue2实现后端返回的列表数据的展示，并添加静态模糊搜索和搜索重置功能。
